/* ==========================================================================
   REGARDO — Design Tokens
   The single source of truth for the product's visual language.
   Nothing in this file is Bootstrap. Bootstrap is used only for grid/utility
   plumbing; every visual decision lives here.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. COLOR — Evergreen (trust, hospitality, permanence)
        + Clay (celebration, warmth) on a warm neutral field.
     --------------------------------------------------------------------- */
  --ev-50:  #F0F6F4;
  --ev-100: #DCEAE7;
  --ev-200: #B7D3CD;
  --ev-300: #8AB7AF;
  --ev-400: #5B9890;
  --ev-500: #367C73;
  --ev-600: #1E625B;
  --ev-700: #114B46;
  --ev-800: #0B3B36;
  --ev-900: #072A27;
  --ev-950: #041B19;

  --clay-50:  #FDF4EF;
  --clay-100: #FAE6DA;
  --clay-200: #F3C9B0;
  --clay-300: #E9A783;
  --clay-400: #DC825A;
  --clay-500: #C2653C;
  --clay-600: #A34E2C;
  --clay-700: #833C23;
  --clay-800: #632E1B;
  --clay-900: #4A2314;

  /* Warm neutral scale — never pure gray, never pure black */
  --n-0:   #FFFFFF;
  --n-25:  #FCFBF9;
  --n-50:  #F8F7F4;
  --n-100: #F1EFEB;
  --n-200: #E5E2DC;
  --n-300: #D2CEC6;
  --n-400: #ABA69C;
  --n-500: #837D72;
  --n-600: #635E55;
  --n-700: #4A4640;
  --n-800: #33302B;
  --n-900: #1F1D1A;
  --n-950: #121110;

  /* Semantic */
  --ok-fg:    #0E6B43;  --ok-bg:    #E8F5EE;  --ok-br:   #B7E0CB;
  --warn-fg:  #9A5A0B;  --warn-bg:  #FDF3E3;  --warn-br: #F3DCB0;
  --err-fg:   #A5251B;  --err-bg:   #FDECEA;  --err-br:  #F5C6C1;
  --info-fg:  #14509B;  --info-bg:  #EAF1FE;  --info-br: #C3D8F8;

  /* ---------------------------------------------------------------------
     2. ROLE TOKENS — components reference these, never raw ramps.
     --------------------------------------------------------------------- */
  --brand:            var(--ev-800);
  --brand-hover:      var(--ev-700);
  --brand-press:      var(--ev-900);
  --brand-soft:       var(--ev-50);
  --brand-soft-br:    var(--ev-100);
  --brand-on:         #FFFFFF;

  --accent:           var(--clay-500);
  --accent-hover:     var(--clay-600);
  --accent-soft:      var(--clay-50);
  --accent-on:        #FFFFFF;

  --bg:               var(--n-50);
  --bg-page:          var(--n-25);
  --surface:          var(--n-0);
  --surface-2:        var(--n-50);
  --surface-sunken:   var(--n-100);
  --surface-inverse:  var(--ev-950);

  --text:             var(--n-900);
  --text-secondary:   var(--n-600);
  --text-muted:       var(--n-500);
  --text-faint:       var(--n-400);
  --text-on-dark:     #F6F4F0;
  --text-on-dark-dim: rgba(246, 244, 240, .68);

  --border:           var(--n-200);
  --border-strong:    var(--n-300);
  --border-subtle:    var(--n-100);
  --border-inverse:   rgba(255, 255, 255, .14);

  --focus-ring:       0 0 0 3px rgba(30, 98, 91, .28);
  --focus-ring-err:   0 0 0 3px rgba(165, 37, 27, .22);

  /* ---------------------------------------------------------------------
     3. TYPOGRAPHY
     --------------------------------------------------------------------- */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Modular scale, 1.2 minor-third-ish, tuned by hand at each step */
  --t-display-xl: 4.25rem;   /* 68 — hero, customer only         */
  --t-display-l:  3.25rem;   /* 52 — section openers             */
  --t-display-m:  2.5rem;    /* 40                               */
  --t-h1:         2rem;      /* 32                               */
  --t-h2:         1.5rem;    /* 24                               */
  --t-h3:         1.1875rem; /* 19                               */
  --t-h4:         1.0625rem; /* 17                               */
  --t-body-l:     1.0625rem; /* 17 — customer reading            */
  --t-body:       0.9375rem; /* 15 — default UI                  */
  --t-body-s:     0.875rem;  /* 14 — dense workspace default     */
  --t-meta:       0.8125rem; /* 13 — metadata                    */
  --t-caption:    0.75rem;   /* 12                               */
  --t-micro:      0.6875rem; /* 11 — eyebrows, badges            */

  --lh-tight:  1.08;
  --lh-snug:   1.24;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-display: -0.022em;
  --tracking-tight:   -0.014em;
  --tracking-normal:  -0.006em;
  --tracking-eyebrow:  0.09em;

  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-extra:    800;

  /* ---------------------------------------------------------------------
     4. SPACE — 4px base. Use the scale, never arbitrary values.
     --------------------------------------------------------------------- */
  --s-0:  0;
  --s-1:  0.25rem;   --s-2:  0.5rem;    --s-3:  0.75rem;   --s-4:  1rem;
  --s-5:  1.25rem;   --s-6:  1.5rem;    --s-7:  1.75rem;   --s-8:  2rem;
  --s-10: 2.5rem;    --s-12: 3rem;      --s-14: 3.5rem;    --s-16: 4rem;
  --s-20: 5rem;      --s-24: 6rem;      --s-32: 8rem;      --s-40: 10rem;

  /* Section rhythm differs by surface: customer breathes, workspace is calm-dense */
  --section-y:        var(--s-20);
  --section-y-tight:  var(--s-14);
  --workspace-gap:    var(--s-5);
  --shell-pad:        var(--s-6);

  /* ---------------------------------------------------------------------
     5. RADIUS — restrained. Nothing is a pill unless it is a chip/badge.
     --------------------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 13px;
  --r-xl: 18px;
  --r-2xl: 24px;
  --r-full: 999px;

  /* ---------------------------------------------------------------------
     6. ELEVATION — light, layered, warm-tinted. No heavy drop shadows.
     --------------------------------------------------------------------- */
  --sh-0: none;
  --sh-1: 0 1px 2px rgba(31, 29, 26, .05);
  --sh-2: 0 1px 2px rgba(31, 29, 26, .05), 0 2px 6px rgba(31, 29, 26, .04);
  --sh-3: 0 2px 4px rgba(31, 29, 26, .05), 0 8px 20px -6px rgba(31, 29, 26, .10);
  --sh-4: 0 4px 8px rgba(31, 29, 26, .05), 0 18px 38px -12px rgba(31, 29, 26, .16);
  --sh-5: 0 8px 16px rgba(31, 29, 26, .06), 0 32px 64px -20px rgba(31, 29, 26, .22);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .6);
  --sh-focus-card: 0 0 0 1px var(--ev-300), 0 8px 24px -8px rgba(11, 59, 54, .22);

  /* ---------------------------------------------------------------------
     7. MOTION
     --------------------------------------------------------------------- */
  --ease-out:   cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --d-instant: 90ms;
  --d-fast:    150ms;
  --d-base:    220ms;
  --d-slow:    340ms;
  --d-panel:   380ms;

  /* ---------------------------------------------------------------------
     8. LAYOUT
     --------------------------------------------------------------------- */
  --container:      1240px;
  --container-wide: 1440px;
  --container-read: 720px;
  --gutter:         var(--s-6);

  --sidebar-w:        264px;
  --sidebar-w-collapsed: 68px;
  --topbar-h:         60px;
  --header-h:         74px;
  --mobile-nav-h:     62px;
  --panel-w:          468px;

  --z-base: 1;
  --z-sticky: 20;
  --z-header: 60;
  --z-drawer: 80;
  --z-panel: 90;
  --z-modal: 100;
  --z-command: 120;
  --z-toast: 140;

  /* Booking status colors — one system used in calendar, tables, badges, cards */
  --st-available-fg: #0E6B43; --st-available-bg: #E8F5EE; --st-available-br: #A8DBC1;
  --st-held-fg:      #8A5A00; --st-held-bg:      #FCF2DC; --st-held-br:      #F0D79B;
  --st-pending-fg:   #9A5A0B; --st-pending-bg:   #FDF3E3; --st-pending-br:   #F3DCB0;
  --st-confirmed-fg: #0B3B36; --st-confirmed-bg: #DCEAE7; --st-confirmed-br: #9CC7C0;
  --st-completed-fg: #4A4640; --st-completed-bg: #F1EFEB; --st-completed-br: #D2CEC6;
  --st-cancelled-fg: #A5251B; --st-cancelled-bg: #FDECEA; --st-cancelled-br: #F5C6C1;
  --st-blocked-fg:   #4A4640; --st-blocked-bg:   #E5E2DC; --st-blocked-br:   #C6C1B7;
  --st-maint-fg:     #14509B; --st-maint-bg:     #EAF1FE; --st-maint-br:     #C3D8F8;
  --st-holiday-fg:   #833C23; --st-holiday-bg:   #FAE6DA; --st-holiday-br:   #EFC3A4;
  /* Aliases so a status string can be dropped straight into a var() name */
  --st-maintenance-fg: var(--st-maint-fg);
  --st-maintenance-bg: var(--st-maint-bg);
  --st-maintenance-br: var(--st-maint-br);
  --st-rejected-fg:  var(--st-cancelled-fg);
  --st-rejected-bg:  var(--st-cancelled-bg);
  --st-rejected-br:  var(--st-cancelled-br);
  --st-expired-fg:   var(--st-blocked-fg);
  --st-expired-bg:   var(--st-blocked-bg);
  --st-expired-br:   var(--st-blocked-br);

  /* Data-visualisation ramp — ordered for perceptual separation, AA on surface */
  --dv-1: #0B3B36;
  --dv-2: #C2653C;
  --dv-3: #5B9890;
  --dv-4: #9A5A0B;
  --dv-5: #4A4640;
  --dv-6: #8AB7AF;
  --dv-grid: rgba(31, 29, 26, .07);
  --dv-axis: var(--n-400);
}

/* --------------------------------------------------------------------------
   Workspace theme — owner & admin shells run denser and slightly cooler.
   Same system, different personality. Applied via [data-surface] on <body>.
   -------------------------------------------------------------------------- */
[data-surface="workspace"] {
  --bg:            #F4F3F0;
  --bg-page:       #F4F3F0;
  --surface:       #FFFFFF;
  --surface-2:     #FAF9F7;
  --section-y:     var(--s-8);
  --shell-pad:     var(--s-5);
  --t-body:        var(--t-body-s);
  --r-lg:          10px;
  --r-xl:          12px;
}

/* Admin runs denser still, and its chrome is inverted. */
[data-surface="control"] {
  --bg:            #F2F2F0;
  --bg-page:       #F2F2F0;
  --surface:       #FFFFFF;
  --surface-2:     #F9F9F7;
  --section-y:     var(--s-7);
  --shell-pad:     var(--s-5);
  --t-body:        var(--t-body-s);
  --r-lg:          10px;
  --r-xl:          12px;
  --workspace-gap: var(--s-4);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-instant: 1ms; --d-fast: 1ms; --d-base: 1ms;
    --d-slow: 1ms; --d-panel: 1ms;
  }
}