/*
 * ============================================================
 * 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 */


  /* ============================================================
     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;


  /* ============================================================
     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 {
  --background:             hsl(222, 84%, 4.9%);
  --foreground:             hsl(210, 40%, 98%);
  --muted:                  hsl(217, 32%, 17%);
  --muted-foreground:       hsl(215, 20%, 65%);
  --popover:                hsl(222, 84%, 4.9%);
  --popover-foreground:     hsl(210, 40%, 98%);
  --card:                   hsl(222, 84%, 4.9%);
  --card-foreground:        hsl(210, 40%, 98%);
  --border:                 hsl(217, 32%, 17%);
  --input:                  hsl(217, 32%, 17%);
  --primary:                hsl(250, 84%, 54%);
  --primary-foreground:     hsl(210, 40%, 98%);
  --secondary:              hsl(217, 32%, 17%);
  --secondary-foreground:   hsl(210, 40%, 98%);
  --accent:                 hsl(217, 32%, 17%);
  --accent-foreground:      hsl(210, 40%, 98%);
  --destructive:            hsl(0, 62%, 30%);
  --destructive-foreground: hsl(210, 40%, 98%);
  --ring:                   hsl(212, 72%, 59%);
}


/* ============================================================
   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;
}


/* ============================================================
   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;
}