/*
 * ============================================================
 * RECUR DESIGN SYSTEM — Shareable Stylesheet
 * ============================================================
 * 
 * The complete Recur color palette, brand aliases, semantic
 * tokens, typography, and UI component styles extracted from
 * the Recur Sites admin console.
 *
 * Usage: Include this file in any app to adopt Recur styling.
 *
 *   <link rel="stylesheet" href="recur-styles.css">
 *
 * Fonts: Imported via recur-fonts.css (Roboto, Roboto Slab, Material Symbols).
 * Icons: Material Symbols imports are included via recur-fonts.css.
 *
 * Last updated: March 2026
 * ============================================================
 */

/* ============================================================
   FONTS — imported from the dedicated font stylesheet
   Update recur-fonts.css to change fonts across all apps.
   ============================================================ */

@import url('recur-fonts.css');


/* ============================================================
   COLOR PALETTE
   ============================================================
   10 color families × 19 shades each (010 lightest → 190 darkest)
   100 = base color for each family
   
   Family 01: Deep Blue (primary brand blue)
   Family 02: Reef Blue (teal-slate)
   Family 03: Sandy Blue (seafoam/teal)
   Family 04: Sand Bar (warm cream)
   Family 05: Stingray (neutral gray)
   Family 06: Hibiscus (red)
   Family 07: Sweet Papaya (orange)
   Family 08: Juicy Mango (amber/gold)
   Family 09: Wild Guava (yellow)
   Family 10: Tahitian Lime (yellow-green)
   ============================================================ */

:root {

  /* --- Family 01: Deep Blue --- */
  --recur-color-01-010: #e6ebf3;
  --recur-color-01-020: #cdd7e6;
  --recur-color-01-030: #b4c2da;
  --recur-color-01-040: #9baecd;
  --recur-color-01-050: #829ac1;
  --recur-color-01-060: #6886b4;
  --recur-color-01-070: #4f72a8;
  --recur-color-01-080: #365d9b;
  --recur-color-01-090: #1d498f;
  --recur-color-01-100: #043582;
  --recur-color-01-110: #043075;
  --recur-color-01-120: #032a68;
  --recur-color-01-130: #03255b;
  --recur-color-01-140: #02204e;
  --recur-color-01-150: #021b41;
  --recur-color-01-160: #021534;
  --recur-color-01-170: #011027;
  --recur-color-01-180: #010b1a;
  --recur-color-01-190: #00050d;

  /* --- Family 02: Reef Blue --- */
  --recur-color-02-010: #eff3f5;
  --recur-color-02-020: #dfe7ea;
  --recur-color-02-030: #cedbe0;
  --recur-color-02-040: #becfd5;
  --recur-color-02-050: #aec3cb;
  --recur-color-02-060: #9eb7c0;
  --recur-color-02-070: #8eabb6;
  --recur-color-02-080: #7d9fab;
  --recur-color-02-090: #6d93a1;
  --recur-color-02-100: #5d8796;
  --recur-color-02-110: #547a87;
  --recur-color-02-120: #4a6c78;
  --recur-color-02-130: #415f69;
  --recur-color-02-140: #38515a;
  --recur-color-02-150: #2f444b;
  --recur-color-02-160: #25363c;
  --recur-color-02-170: #1c282d;
  --recur-color-02-180: #131b1e;
  --recur-color-02-190: #090d0f;

  /* --- Family 03: Sandy Blue --- */
  --recur-color-03-010: #f3f9f9;
  --recur-color-03-020: #e7f3f3;
  --recur-color-03-030: #dceeed;
  --recur-color-03-040: #d0e8e7;
  --recur-color-03-050: #c4e2e2;
  --recur-color-03-060: #b8dcdc;
  --recur-color-03-070: #acd6d6;
  --recur-color-03-080: #a1d1d0;
  --recur-color-03-090: #95cbca;
  --recur-color-03-100: #89c5c4;
  --recur-color-03-110: #7bb1b0;
  --recur-color-03-120: #6e9e9d;
  --recur-color-03-130: #608a89;
  --recur-color-03-140: #527676;
  --recur-color-03-150: #456362;
  --recur-color-03-160: #374f4e;
  --recur-color-03-170: #293b3b;
  --recur-color-03-180: #1b2727;
  --recur-color-03-190: #0e1414;

  /* --- Family 04: Sand Bar --- */
  --recur-color-04-010: #fffefc;
  --recur-color-04-020: #fffef9;
  --recur-color-04-030: #fffdf5;
  --recur-color-04-040: #fffcf2;
  --recur-color-04-050: #fffcef;
  --recur-color-04-060: #fffbec;
  --recur-color-04-070: #fffae9;
  --recur-color-04-080: #fff9e5;
  --recur-color-04-090: #fff9e2;
  --recur-color-04-100: #fff8df;
  --recur-color-04-110: #e6dfc9;
  --recur-color-04-120: #ccc6b2;
  --recur-color-04-130: #b3ae9c;
  --recur-color-04-140: #999586;
  --recur-color-04-150: #807c70;
  --recur-color-04-160: #666359;
  --recur-color-04-170: #4c4a43;
  --recur-color-04-180: #33322d;
  --recur-color-04-190: #191916;

  /* --- Family 05: Stingray (Neutral Gray) --- */
  --recur-color-05-010: #ededed;
  --recur-color-05-020: #dbdbdb;
  --recur-color-05-030: #cacaca;
  --recur-color-05-040: #b8b8b8;
  --recur-color-05-050: #a6a6a6;
  --recur-color-05-060: #949494;
  --recur-color-05-070: #828282;
  --recur-color-05-080: #717171;
  --recur-color-05-090: #5f5f5f;
  --recur-color-05-100: #4d4d4d;
  --recur-color-05-110: #454545;
  --recur-color-05-120: #3e3e3e;
  --recur-color-05-130: #363636;
  --recur-color-05-140: #2e2e2e;
  --recur-color-05-150: #272727;
  --recur-color-05-160: #1f1f1f;
  --recur-color-05-170: #171717;
  --recur-color-05-180: #0f0f0f;
  --recur-color-05-190: #080808;

  /* --- Family 06: Hibiscus (Red) --- */
  --recur-color-06-010: #faeae7;
  --recur-color-06-020: #f5d4cf;
  --recur-color-06-030: #f0bfb8;
  --recur-color-06-040: #ebaaa0;
  --recur-color-06-050: #e79588;
  --recur-color-06-060: #e27f70;
  --recur-color-06-070: #dd6a58;
  --recur-color-06-080: #d85541;
  --recur-color-06-090: #d33f29;
  --recur-color-06-100: #ce2a11;
  --recur-color-06-110: #b9260f;
  --recur-color-06-120: #a5220e;
  --recur-color-06-130: #901d0c;
  --recur-color-06-140: #7c190a;
  --recur-color-06-150: #671509;
  --recur-color-06-160: #521107;
  --recur-color-06-170: #3e0d05;
  --recur-color-06-180: #290803;
  --recur-color-06-190: #150402;

  /* --- Family 07: Sweet Papaya (Orange) --- */
  --recur-color-07-010: #fef0ea;
  --recur-color-07-020: #fee2d6;
  --recur-color-07-030: #fdd3c1;
  --recur-color-07-040: #fdc5ad;
  --recur-color-07-050: #fcb698;
  --recur-color-07-060: #fba783;
  --recur-color-07-070: #fb996f;
  --recur-color-07-080: #fa8a5a;
  --recur-color-07-090: #fa7c46;
  --recur-color-07-100: #f96d31;
  --recur-color-07-110: #e0622c;
  --recur-color-07-120: #c75727;
  --recur-color-07-130: #ae4c22;
  --recur-color-07-140: #95411d;
  --recur-color-07-150: #7d3719;
  --recur-color-07-160: #642c14;
  --recur-color-07-170: #4b210f;
  --recur-color-07-180: #32160a;
  --recur-color-07-190: #190b05;

  /* --- Family 08: Juicy Mango (Amber/Gold) --- */
  --recur-color-08-010: #fdf8ec;
  --recur-color-08-020: #fbf0d9;
  --recur-color-08-030: #f9e9c6;
  --recur-color-08-040: #f7e1b3;
  --recur-color-08-050: #f6daa0;
  --recur-color-08-060: #f4d38d;
  --recur-color-08-070: #f2cb7a;
  --recur-color-08-080: #f0c467;
  --recur-color-08-090: #eebc54;
  --recur-color-08-100: #ecb541;
  --recur-color-08-110: #d4a33b;
  --recur-color-08-120: #bd9134;
  --recur-color-08-130: #a57f2e;
  --recur-color-08-140: #8e6d27;
  --recur-color-08-150: #765b21;
  --recur-color-08-160: #5e481a;
  --recur-color-08-170: #473613;
  --recur-color-08-180: #2f240d;
  --recur-color-08-190: #181206;

  /* --- Family 09: Wild Guava (Yellow) --- */
  --recur-color-09-010: #fffdee;
  --recur-color-09-020: #fffcdd;
  --recur-color-09-030: #fffacb;
  --recur-color-09-040: #fff8ba;
  --recur-color-09-050: #fff7a9;
  --recur-color-09-060: #fff598;
  --recur-color-09-070: #fff387;
  --recur-color-09-080: #fff175;
  --recur-color-09-090: #fff064;
  --recur-color-09-100: #ffee53;
  --recur-color-09-110: #e6d64b;
  --recur-color-09-120: #ccbe42;
  --recur-color-09-130: #b3a73a;
  --recur-color-09-140: #998f32;
  --recur-color-09-150: #80772a;
  --recur-color-09-160: #665f21;
  --recur-color-09-170: #4c4719;
  --recur-color-09-180: #333011;
  --recur-color-09-190: #191808;

  /* --- Family 10: Tahitian Lime (Yellow-Green) --- */
  --recur-color-10-000: #ffffff;
  --recur-color-10-010: #f8fbeb;
  --recur-color-10-020: #f1f7d7;
  --recur-color-10-030: #eaf3c3;
  --recur-color-10-040: #e3efaf;
  --recur-color-10-050: #dceb9b;
  --recur-color-10-060: #d4e686;
  --recur-color-10-070: #cde272;
  --recur-color-10-080: #c6de5e;
  --recur-color-10-090: #bfda4a;
  --recur-color-10-100: #b8d636;
  --recur-color-10-110: #a6c131;
  --recur-color-10-120: #93ab2b;
  --recur-color-10-130: #819626;
  --recur-color-10-140: #6e8020;
  --recur-color-10-150: #5c6b1b;
  --recur-color-10-160: #4a5616;
  --recur-color-10-170: #374010;
  --recur-color-10-180: #252b0b;
  --recur-color-10-190: #121505;


  /* ============================================================
     BRAND ALIASES
     ============================================================
     Friendly names that map to palette base colors (100 shade).
     ============================================================ */

  --recur-deep-blue:     var(--recur-color-01-100);  /* #043582 */
  --recur-reef-blue:     var(--recur-color-02-100);  /* #5d8796 */
  --recur-sandy-blue:    var(--recur-color-03-100);  /* #89c5c4 */
  --recur-sand-bar:      var(--recur-color-04-100);  /* #fff8df */
  --recur-stingray:      var(--recur-color-05-100);  /* #4d4d4d */
  --recur-hibiscus:      var(--recur-color-06-100);  /* #ce2a11 */
  --recur-sweet-papaya:  var(--recur-color-07-100);  /* #f96d31 */
  --recur-juicy-mango:   var(--recur-color-08-100);  /* #ecb541 */
  --recur-wild-guava:    var(--recur-color-09-100);  /* #ffee53 */
  --recur-tahitian-lime: var(--recur-color-10-100);  /* #b8d636 */

  /* --- Tint aliases (010 shade of each family) ---
     Light background tints used for hover states, badges, etc.
     These are overridden in .dark to use deeper shades. */
  --recur-deep-blue-010:     var(--recur-color-01-010);
  --recur-reef-blue-010:     var(--recur-color-02-010);
  --recur-sandy-blue-010:    var(--recur-color-03-010);
  --recur-stingray-010:      var(--recur-color-05-010);
  --recur-hibiscus-010:      var(--recur-color-06-010);
  --recur-sweet-papaya-010:  var(--recur-color-07-010);
  --recur-juicy-mango-010:   var(--recur-color-08-010);
  --recur-wild-guava-010:    var(--recur-color-09-010);
  --recur-tahitian-lime-010: var(--recur-color-10-010);

  /* --- Extra light shade for sidebar background --- */
  --recur-color-01-005: #f0f3f8;

  /* --- Stingray shade aliases (for dark mode overridability) --- */
  --recur-stingray-020:      var(--recur-color-05-020);
  --recur-stingray-050:      var(--recur-color-05-050);
  --recur-stingray-070:      var(--recur-color-05-070);


  /* ============================================================
     SEMANTIC TOKENS
     ============================================================
     Role-based color assignments used across the admin UI.
     ============================================================ */

  /* --- Core UI --- */
  --background:             var(--recur-color-10-000);   /* white */
  --foreground:             var(--recur-color-05-100);   /* gray 100 */
  --muted:                  var(--recur-color-05-010);
  --muted-foreground:       var(--recur-color-05-070);
  --border:                 var(--recur-color-05-030);
  --input:                  var(--recur-color-05-020);
  --ring:                   var(--recur-color-01-100);
  --radius:                 0.5rem;

  /* --- Primary (Deep Blue) --- */
  --primary:                var(--recur-color-01-100);
  --primary-foreground:     var(--recur-color-01-010);

  /* --- Secondary (Reef Blue) --- */
  --secondary:              var(--recur-color-02-100);
  --secondary-foreground:   var(--recur-color-02-010);

  /* --- Accent (Sandy Blue) --- */
  --accent:                 var(--recur-color-03-100);
  --accent-foreground:      var(--recur-color-03-010);

  /* --- Destructive (Hibiscus) --- */
  --destructive:            var(--recur-color-06-100);
  --destructive-foreground: var(--recur-color-06-010);

  /* --- Success (Tahitian Lime) --- */
  --success:                var(--recur-color-10-100);
  --success-foreground:     var(--recur-color-10-190);

  /* --- Warning (Juicy Mango) --- */
  --warning:                var(--recur-color-08-100);
  --warning-foreground:     var(--recur-color-08-190);

  /* --- Popover / Card --- */
  --popover:                var(--recur-color-10-000);
  --popover-foreground:     var(--recur-color-05-100);
  --card:                   var(--recur-color-10-000);
  --card-foreground:        var(--recur-color-05-100);

  /* --- Charts --- */
  --chart-1:                var(--recur-color-01-100);
  --chart-2:                var(--recur-color-02-100);
  --chart-3:                var(--recur-color-03-100);
  --chart-4:                var(--recur-color-07-100);
  --chart-5:                var(--recur-color-08-100);

  /* --- Status indicators --- */
  --status-draft:              var(--recur-color-05-050);
  --status-draft-foreground:   var(--recur-color-05-190);
  --status-published:          var(--recur-tahitian-lime);
  --status-published-foreground: var(--recur-color-10-190);
  --status-changes:            var(--recur-juicy-mango);
  --status-changes-foreground: var(--recur-color-08-190);
  --status-public:             var(--recur-color-03-050);
  --status-public-foreground:  var(--recur-color-03-190);
  --status-member:             var(--recur-color-01-050);
  --status-member-foreground:  var(--recur-color-01-190);


  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  --font-family-primary:   'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-family-secondary: 'Roboto Slab', 'Roboto', Georgia, serif;

  --font-size-xs:   12px;
  --font-size-sm:   14px;
  --font-size-base: 16px;
  --font-size-lg:   18px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;
  --font-size-3xl:  30px;
  --font-size-4xl:  36px;
  --font-size-5xl:  48px;

  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:  1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  --letter-spacing-tight:  -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.025em;

  --recur-heading-h1: var(--recur-deep-blue);
  --recur-heading-h2: var(--recur-reef-blue);
  --recur-heading-h3: var(--recur-sandy-blue);
  --recur-heading-h4: var(--recur-tahitian-lime);
  --recur-heading-h5: var(--recur-deep-blue);
  --recur-heading-h6: var(--recur-reef-blue);


  /* ============================================================
     SPACING
     ============================================================ */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;


  /* ============================================================
     BORDERS & SHADOWS
     ============================================================ */

  --border-radius-sm:   0.25rem;
  --border-radius-md:   0.375rem;
  --border-radius-lg:   0.5rem;
  --border-radius-xl:   0.75rem;
  --border-radius-2xl:  1rem;
  --border-radius-full: 9999px;

  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);


  /* ============================================================
     TRANSITIONS
     ============================================================ */

  --transition-fast:    150ms ease;
  --transition-normal:  200ms ease;
  --transition-slow:    300ms ease;
}


/* ============================================================
   DARK MODE
   ============================================================
   Add class="dark" to <html> or <body> to activate.
   ============================================================ */

.dark {

  /* --- Core UI ---
     Background uses Deep Blue 170 for a branded dark surface.
     Foreground uses Stingray 010 for high-contrast light text.
     All values reference the existing palette shades. */
  --background:             var(--recur-color-01-170);
  --foreground:             var(--recur-color-05-010);
  --muted:                  var(--recur-color-01-160);
  --muted-foreground:       var(--recur-color-05-040);
  --border:                 var(--recur-color-01-150);
  --input:                  var(--recur-color-01-150);
  --ring:                   var(--recur-color-01-060);

  /* --- Popover / Card ---
     Slightly lighter than background for layered elevation. */
  --popover:                var(--recur-color-01-160);
  --popover-foreground:     var(--recur-color-05-010);
  --card:                   var(--recur-color-01-160);
  --card-foreground:        var(--recur-color-05-010);

  /* --- Primary (Deep Blue — lightened for dark surfaces) --- */
  --primary:                var(--recur-color-01-060);
  --primary-foreground:     var(--recur-color-10-000);

  /* --- Secondary (Reef Blue — lightened) --- */
  --secondary:              var(--recur-color-02-060);
  --secondary-foreground:   var(--recur-color-01-180);

  /* --- Accent (Sandy Blue — lightened) --- */
  --accent:                 var(--recur-color-03-060);
  --accent-foreground:      var(--recur-color-01-180);

  /* --- Destructive (Hibiscus — mid-tone for dark) --- */
  --destructive:            var(--recur-color-06-060);
  --destructive-foreground: var(--recur-color-06-010);

  /* --- Success (Tahitian Lime — mid-tone for dark) --- */
  --success:                var(--recur-color-10-060);
  --success-foreground:     var(--recur-color-10-190);

  /* --- Warning (Juicy Mango — mid-tone for dark) --- */
  --warning:                var(--recur-color-08-060);
  --warning-foreground:     var(--recur-color-08-190);

  /* --- Charts (lighter tints for visibility on dark) --- */
  --chart-1:                var(--recur-color-01-050);
  --chart-2:                var(--recur-color-02-050);
  --chart-3:                var(--recur-color-03-050);
  --chart-4:                var(--recur-color-07-050);
  --chart-5:                var(--recur-color-08-050);

  /* --- Status indicators (mid-tones for dark backgrounds) --- */
  --status-draft:              var(--recur-color-05-060);
  --status-draft-foreground:   var(--recur-color-05-010);
  --status-published:          var(--recur-color-10-060);
  --status-published-foreground: var(--recur-color-10-190);
  --status-changes:            var(--recur-color-08-060);
  --status-changes-foreground: var(--recur-color-08-190);
  --status-public:             var(--recur-color-03-060);
  --status-public-foreground:  var(--recur-color-03-190);
  --status-member:             var(--recur-color-01-060);
  --status-member-foreground:  var(--recur-color-01-190);

  /* --- Brand aliases shift to lighter variants in dark mode ---
     The base brand colors are too dark to read on dark backgrounds.
     These overrides lighten them to the 040–060 range for legibility
     while keeping the same hue. */
  --recur-deep-blue:     var(--recur-color-01-040);
  --recur-reef-blue:     var(--recur-color-02-040);
  --recur-sandy-blue:    var(--recur-color-03-040);
  --recur-sand-bar:      var(--recur-color-04-060);
  --recur-stingray:      var(--recur-color-05-040);
  --recur-hibiscus:      var(--recur-color-06-040);
  --recur-sweet-papaya:  var(--recur-color-07-040);
  --recur-juicy-mango:   var(--recur-color-08-040);
  --recur-wild-guava:    var(--recur-color-09-040);
  --recur-tahitian-lime: var(--recur-color-10-040);

  /* --- Tint aliases for badges/backgrounds on dark surfaces ---
     The light-mode -010 tints are nearly white and invisible on dark.
     In dark mode, shift them to deep translucent shades that sit
     above the background while keeping the brand hue. */
  --recur-deep-blue-010:     var(--recur-color-01-150);
  --recur-reef-blue-010:     var(--recur-color-02-150);
  --recur-sandy-blue-010:    var(--recur-color-03-150);
  --recur-stingray-010:      var(--recur-color-05-150);
  --recur-hibiscus-010:      var(--recur-color-06-150);
  --recur-sweet-papaya-010:  var(--recur-color-07-150);
  --recur-juicy-mango-010:   var(--recur-color-08-150);
  --recur-wild-guava-010:    var(--recur-color-09-150);
  --recur-tahitian-lime-010: var(--recur-color-10-150);

  /* --- Stingray shade overrides for borders and muted text --- */
  --recur-stingray-020:      var(--recur-color-05-140);
  --recur-stingray-050:      var(--recur-color-05-060);
  --recur-stingray-070:      var(--recur-color-05-030);

  /* --- Heading colors (use lightened brand shades, no hex) --- */
  --recur-heading-h1: var(--recur-color-01-040);
  --recur-heading-h2: var(--recur-color-02-040);
  --recur-heading-h3: var(--recur-color-03-040);
  --recur-heading-h4: var(--recur-color-10-050);
  --recur-heading-h5: var(--recur-color-01-040);
  --recur-heading-h6: var(--recur-color-02-040);

  /* --- Shadows — stronger for dark surfaces --- */
  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.25);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.3);

  /* --- Sidebar dark overrides --- */
  --recur-color-01-005: var(--recur-color-01-180);
}


/* ============================================================
   BASE STYLES
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--foreground);
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-secondary);
}

h1 { color: var(--recur-heading-h1); }
h2 { color: var(--recur-heading-h2); }
h3 { color: var(--recur-heading-h3); }
h4 { color: var(--recur-heading-h4); }
h5 { color: var(--recur-heading-h5); }
h6 { color: var(--recur-heading-h6); }


/* ============================================================
   MATERIAL SYMBOLS ICON FONT
   ============================================================ */

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}


/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */

.text-xs   { font-size: var(--font-size-xs); }
.text-sm   { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg   { font-size: var(--font-size-lg); }
.text-xl   { font-size: var(--font-size-xl); }
.text-2xl  { font-size: var(--font-size-2xl); }
.text-3xl  { font-size: var(--font-size-3xl); }
.text-4xl  { font-size: var(--font-size-4xl); }
.text-5xl  { font-size: var(--font-size-5xl); }

.font-light    { font-weight: var(--font-weight-light); }
.font-normal   { font-weight: var(--font-weight-normal); }
.font-medium   { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold     { font-weight: var(--font-weight-bold); }

.font-primary   { font-family: var(--font-family-primary); }
.font-secondary { font-family: var(--font-family-secondary); }


/* ============================================================
   COLOR UTILITIES
   ============================================================
   Quick classes for applying brand colors.
   ============================================================ */

/* Text colors */
.text-primary       { color: var(--primary); }
.text-secondary     { color: var(--secondary); }
.text-accent        { color: var(--accent); }
.text-destructive   { color: var(--destructive); }
.text-success       { color: var(--success); }
.text-warning       { color: var(--warning); }
.text-muted         { color: var(--muted-foreground); }

/* Background colors */
.bg-primary       { background-color: var(--primary); color: var(--primary-foreground); }
.bg-secondary     { background-color: var(--secondary); color: var(--secondary-foreground); }
.bg-accent        { background-color: var(--accent); color: var(--accent-foreground); }
.bg-destructive   { background-color: var(--destructive); color: var(--destructive-foreground); }
.bg-success       { background-color: var(--success); color: var(--success-foreground); }
.bg-warning       { background-color: var(--warning); color: var(--warning-foreground); }
.bg-muted         { background-color: var(--muted); color: var(--muted-foreground); }
.bg-card          { background-color: var(--card); color: var(--card-foreground); }

/* Brand palette — direct access by name */
.bg-deep-blue      { background-color: var(--recur-deep-blue); color: white; }
.bg-reef-blue      { background-color: var(--recur-reef-blue); color: white; }
.bg-sandy-blue     { background-color: var(--recur-sandy-blue); color: #1f2937; }
.bg-sand-bar       { background-color: var(--recur-sand-bar); color: #1f2937; }
.bg-stingray       { background-color: var(--recur-stingray); color: white; }
.bg-hibiscus       { background-color: var(--recur-hibiscus); color: white; }
.bg-sweet-papaya   { background-color: var(--recur-sweet-papaya); color: white; }
.bg-juicy-mango    { background-color: var(--recur-juicy-mango); color: #1f2937; }
.bg-wild-guava     { background-color: var(--recur-wild-guava); color: #1f2937; }
.bg-tahitian-lime  { background-color: var(--recur-tahitian-lime); color: #1f2937; }

.text-deep-blue     { color: var(--recur-deep-blue); }
.text-reef-blue     { color: var(--recur-reef-blue); }
.text-sandy-blue    { color: var(--recur-sandy-blue); }
.text-sand-bar      { color: var(--recur-sand-bar); }
.text-stingray      { color: var(--recur-stingray); }
.text-hibiscus      { color: var(--recur-hibiscus); }
.text-sweet-papaya  { color: var(--recur-sweet-papaya); }
.text-juicy-mango   { color: var(--recur-juicy-mango); }
.text-wild-guava    { color: var(--recur-wild-guava); }
.text-tahitian-lime { color: var(--recur-tahitian-lime); }

/* Border colors */
.border-primary     { border-color: var(--primary); }
.border-secondary   { border-color: var(--secondary); }
.border-accent      { border-color: var(--accent); }
.border-destructive { border-color: var(--destructive); }
.border-muted       { border-color: var(--border); }


/* ============================================================
   STATUS BADGES
   ============================================================ */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.status-badge-draft {
  background-color: var(--status-draft);
  color: var(--status-draft-foreground);
}

.status-badge-published {
  background-color: var(--status-published);
  color: var(--status-published-foreground);
}

.status-badge-changes {
  background-color: var(--status-changes);
  color: var(--status-changes-foreground);
}

.status-badge-public {
  background-color: var(--status-public);
  color: var(--status-public-foreground);
}

.status-badge-member {
  background-color: var(--status-member);
  color: var(--status-member-foreground);
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--border-radius-md);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  min-height: 40px;
}

.btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}

.btn-secondary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}

.btn-outline:hover {
  background-color: var(--primary);
  color: var(--primary-foreground);
  transform: translateY(-1px);
}

.btn-destructive {
  background-color: var(--destructive);
  color: var(--destructive-foreground);
}

.btn-destructive:hover {
  opacity: 0.9;
}

.btn-ghost {
  background-color: transparent;
  color: var(--foreground);
}

.btn-ghost:hover {
  background-color: var(--muted);
}

.btn-sm {
  padding: 6px 12px;
  font-size: var(--font-size-xs);
  min-height: 32px;
}

.btn-lg {
  padding: 14px 28px;
  font-size: var(--font-size-base);
  min-height: 48px;
}


/* ============================================================
   CARDS
   ============================================================ */

.card {
  background-color: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
}

.card-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.card-body {
  padding: var(--space-6);
}

.card-footer {
  padding: var(--space-6);
  border-top: 1px solid var(--border);
}


/* ============================================================
   FORM INPUTS
   ============================================================ */

.input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--border-radius-md);
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent);
}

.input::placeholder {
  color: var(--muted-foreground);
}

.input-error {
  border-color: var(--destructive);
}

.input-error:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 20%, transparent);
}

.label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--foreground);
}


/* ============================================================
   BADGES
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.6;
}

.badge-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.badge-secondary {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}

.badge-success {
  background-color: var(--success);
  color: var(--success-foreground);
}

.badge-warning {
  background-color: var(--warning);
  color: var(--warning-foreground);
}

.badge-destructive {
  background-color: var(--destructive);
  color: var(--destructive-foreground);
}

.badge-outline {
  background-color: transparent;
  border: 1px solid var(--border);
  color: var(--foreground);
}


/* ============================================================
   SHELL LAYOUT — App Layout with Header + Sidebar + Content
   ============================================================
   Provides the standard Recur application layout using the
   <recur-header>, <recur-nav>, and <recur-footer> web components.

   Usage:
     <body>
       <recur-header config-url="/v1/shell/config"></recur-header>
       <div class="recur-app-layout">
         <recur-nav config-url="/v1/shell/config"></recur-nav>
         <main class="recur-app-content">
           <!-- Your app content here -->
         </main>
       </div>
       <recur-footer></recur-footer>
     </body>
   ============================================================ */

.recur-app-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

.recur-app-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
  min-width: 0;
}

.recur-app-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.recur-app-body > recur-header {
  flex-shrink: 0;
}

.recur-app-body > recur-footer {
  flex-shrink: 0;
}


/* ============================================================
   SIDEBAR NAVIGATION — Standard Recur App Sidebar
   ============================================================
   Pre-built classes for building a left sidebar that matches
   the Recur Core navigation pattern. Use these in your app's
   own sidebar component (the sidebar is NOT a web component).

   Structure:
     <aside class="recur-sidebar">
       <div class="recur-sidebar-header">
         <img src="..." class="recur-sidebar-app-icon" />
         <div class="recur-sidebar-app-info">
           <span class="recur-sidebar-app-name">App Name</span>
           <span class="recur-sidebar-app-subtitle">Subtitle</span>
         </div>
         <button class="recur-sidebar-collapse-btn">‹</button>
       </div>
       <nav class="recur-sidebar-nav">
         <a class="recur-sidebar-nav-item active" href="/">
           <span class="recur-sidebar-nav-icon">...</span>
           <span class="recur-sidebar-nav-label">Dashboard</span>
         </a>
         <div class="recur-sidebar-group">
           <button class="recur-sidebar-group-trigger">
             <span class="recur-sidebar-nav-icon">...</span>
             <span class="recur-sidebar-nav-label">Management</span>
             <span class="recur-sidebar-group-chevron">▾</span>
           </button>
           <div class="recur-sidebar-group-content">
             <a class="recur-sidebar-sub-item" href="/vendors">
               <span class="recur-sidebar-nav-icon">...</span>
               <span class="recur-sidebar-nav-label">Vendors</span>
             </a>
           </div>
         </div>
       </nav>
     </aside>
   ============================================================ */

.recur-sidebar {
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;
  --nav-bg: #eff2f7;
  --nav-foreground: #363636;
  --nav-muted: #828282;
  --nav-accent: #e0e4ed;
  --nav-accent-foreground: #363636;
  --nav-border: #dde1ea;
  --nav-icon: #6b7280;
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--nav-bg);
  border-right: 1px solid var(--nav-border);
  transition: width 200ms ease, min-width 200ms ease;
  overflow: hidden;
  flex-shrink: 0;
}

.recur-sidebar.collapsed {
  width: var(--sidebar-width-collapsed);
  min-width: var(--sidebar-width-collapsed);
}

.recur-sidebar-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem;
}

.recur-sidebar-app-icon {
  width: 32px;
  height: 32px;
  border-radius: 0.375rem;
  object-fit: contain;
  flex-shrink: 0;
}

.recur-sidebar-app-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.recur-sidebar-app-name {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--foreground, #1a1a1a);
}

.recur-sidebar-app-subtitle {
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--recur-stingray-050, #808080);
}

.recur-sidebar-collapse-btn {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 0.375rem;
  border: none;
  background: transparent;
  color: var(--recur-stingray-050);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.recur-sidebar-collapse-btn:hover {
  background: var(--recur-deep-blue-010);
  color: var(--recur-deep-blue);
}

.recur-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.25rem 0;
}

.recur-sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  margin: 1px 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--nav-foreground);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.recur-sidebar-nav-item:hover {
  background: var(--nav-accent);
  color: var(--nav-accent-foreground);
}

.recur-sidebar-nav-item.active {
  background: var(--nav-accent);
  color: var(--nav-accent-foreground);
  box-shadow: inset 3px 0 0 var(--recur-deep-blue);
  font-weight: 600;
}

.recur-sidebar-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--nav-icon);
}

.recur-sidebar-nav-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recur-sidebar-group-trigger {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  margin: 1px 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--nav-foreground);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
  text-align: left;
}

.recur-sidebar-group-trigger:hover {
  background: var(--nav-accent);
  color: var(--nav-accent-foreground);
}

.recur-sidebar-group-trigger.active {
  background: var(--nav-accent);
  color: var(--nav-accent-foreground);
}

.recur-sidebar-group-chevron {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.recur-sidebar-group-chevron.collapsed {
  transform: rotate(-90deg);
}

.recur-sidebar-group-content {
  overflow: hidden;
}

.recur-sidebar-sub-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0.75rem 0.375rem 2.25rem;
  margin: 1px 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--recur-stingray-070);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.recur-sidebar-sub-item:hover {
  background: var(--recur-deep-blue-010);
  color: var(--recur-deep-blue);
}

.recur-sidebar-sub-item.active {
  background: var(--recur-deep-blue-010);
  color: var(--recur-deep-blue);
  box-shadow: inset 3px 0 0 var(--recur-deep-blue);
}

.recur-sidebar-sub-item .recur-sidebar-nav-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.collapsed .recur-sidebar-nav-label,
.collapsed .recur-sidebar-group-chevron,
.collapsed .recur-sidebar-app-info {
  display: none;
}

.collapsed .recur-sidebar-header {
  justify-content: center;
  padding: 0.75rem 0.5rem;
}

.collapsed .recur-sidebar-nav-item,
.collapsed .recur-sidebar-group-trigger {
  justify-content: center;
  padding: 0.625rem;
  margin: 1px 0.375rem;
}

.collapsed .recur-sidebar-sub-item {
  display: none;
}

.recur-sidebar-footer {
  padding: 1rem;
  margin-top: auto;
  border-top: 1px solid var(--nav-border);
}

.recur-sidebar-theme-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  margin: 1px 0;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--nav-foreground);
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background-color 150ms ease, color 150ms ease;
}

.recur-sidebar-theme-toggle:hover {
  background: var(--nav-accent);
  color: var(--nav-accent-foreground);
}

.collapsed .recur-sidebar-footer {
  padding: 0.5rem;
}

.collapsed .recur-sidebar-theme-toggle {
  justify-content: center;
  padding: 0.625rem;
}

.recur-sidebar-flyout {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 180px;
  background: var(--nav-bg);
  border: 1px solid var(--nav-border);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(4, 53, 130, 0.08);
  padding: 0.25rem;
  z-index: 50;
}

.recur-sidebar-group:hover .recur-sidebar-flyout,
.recur-sidebar-flyout:hover {
  display: block;
}

.collapsed .recur-sidebar-group {
  position: relative;
}

@media (max-width: 767px) {
  .recur-sidebar {
    position: fixed;
    z-index: 40;
    left: 0;
    top: 0;
    transform: translateX(-100%);
    transition: transform 200ms ease;
  }

  .recur-sidebar.open {
    transform: translateX(0);
  }
}

.dark .recur-sidebar {
  --nav-bg: #1a1f2e;
  --nav-foreground: #ededed;
  --nav-muted: #a6a6a6;
  --nav-accent: #242a3b;
  --nav-accent-foreground: #ededed;
  --nav-border: #2a3040;
  --nav-icon: #8b95a6;
}