/* ============================================================================
   DESIGN TOKENS — MyCity Child Care Prototype
   Single source of truth for all visual properties.
   Change a value here → every component updates automatically.
   ============================================================================ */

:root {
  /* ── NYC Brand Colors ─────────────────────────────────────────────────── */
  --nyc-dark:            #1a1a2e;
  --nyc-red:             #c9283e;
  --nyc-red-hover:       #a8213a;
  --nyc-red-light:       #e8d0d4;  /* used for ::selection in base.css */
  --nyc-red-bg:          #fdf2f3;

  /* ── Page & Surface Colors ────────────────────────────────────────────── */
  --page-bg:             #fff;
  --page-pink:           #f9e0e6;
  --page-pink-light:     #fdf2f5;
  /* Deeper rose — used by the breadcrumb / header chrome (.page-header)
     so the top bar reads as distinct chrome above the pink → blue page
     gradient. Without it the header sits at ~#f9e0e6 and the gradient
     starts at #FDDFEA, so the bar visually dissolves into the body.
     Stays in the same rose family as --page-pink + --page-gradient-start;
     just one step more saturated. */
  --page-pink-deep:      #f1c4d2;
  --surface-white:       #fff;
  --surface-card:        #fff;
  --surface-muted:       #f7f7f7;
  --surface-hover:       #f0f0f0;

  /* ── Page Background Gradient ────────────────────────────────────────────
     Soft pink → cool blue, applied to the dashboard / app body so the
     vertical scroll has visual interest and — crucially — gives the
     notification cards (which use soft pink for error / warning tones)
     contrast against most of the viewport instead of merging into a
     uniform pink fill. Top is the same family as --page-pink so the
     header bar visually continues; bottom lands on a barely-tinted
     mint/blue so cards float clearly against it. */
  --page-gradient-start: #FDDFEA;
  --page-gradient-end:   #F4FEFE;
  --page-gradient:       linear-gradient(180deg, var(--page-gradient-start) 0%, var(--page-gradient-end) 100%);

  /* ── Text Colors ──────────────────────────────────────────────────────── */
  --text-primary:        #212121;
  --text-secondary:      #4a4a4a;   /* was #555 — slightly darker for body-secondary readability */
  --text-muted:          #5b5b5b;   /* was #888 — too faded against pale-pink/white at xs/sm sizes */
  --text-inverse:        #fff;
  --text-link:           #c9283e;
  --text-link-hover:     #a8213a;

  /* ── Status Colors ────────────────────────────────────────────────────── */
  --status-verified-bg:     #e6f4ea;
  --status-verified-text:   #1a7431;
  --status-verified-border: #b7e1c3;

  --status-checking-bg:     #e8f0fe;
  --status-checking-text:   #1a56db;
  --status-checking-border: #a4c8f0;

  --status-progress-bg:     #fff8e1;
  --status-progress-text:   #b8860b;
  --status-progress-border: #ffe082;

  --status-reviews-bg:      #fce4ec;
  --status-reviews-text:    #c62828;
  --status-reviews-border:  #ef9a9a;

  /* Application-status pill family.
     Pattern (matches .deadline-pill — light tinted bg + darker family text
     + visible border in same family). DENIED is the destructive variant
     used for "decision is final and adverse" — solid red with white text. */
  --status-draft-bg:           #f5f5f5;
  --status-draft-text:         #3f3f46;
  --status-draft-border:       #d4d4d8;

  --status-draft-expired-bg:   #fef2f2;
  --status-draft-expired-text: #991b1b;
  --status-draft-expired-border:#fca5a5;

  --status-in-process-bg:      #eff6ff;
  --status-in-process-text:    #1e40af;
  --status-in-process-border:  #93c5fd;

  --status-approved-bg:        #f0fdf4;
  --status-approved-text:      #166534;
  --status-approved-border:    #86efac;

  --status-waitlisted-bg:      #fffbeb;
  --status-waitlisted-text:    #92400e;
  --status-waitlisted-border:  #fcd34d;

  /* Denied — outlined pill in pure NYC red. Same shape as the other
     status pills (white bg, family text, family border), just with the
     brand red carrying the full weight of the adverse-decision message.
     Stronger than the pale-red Draft Expired variant; less heavy than a
     solid fill. */
  --status-denied-bg:          #ffffff;
  --status-denied-text:        var(--nyc-red);
  --status-denied-border:      var(--nyc-red);

  /* ── Stepper Colors ───────────────────────────────────────────────────── */
  --stepper-completed:     #2e7d32;
  --stepper-current:       #c9283e;
  --stepper-line:          #2e7d32;
  --stepper-line-current:  #c9283e;
  /* Removed: --stepper-future and --stepper-line-future (duplicated
     --stepper-current / --stepper-line-current; no separate consumers). */

  /* ── Alert / Banner Colors ────────────────────────────────────────────────
     Each family carries ONE background shade — the same soft pastel used by
     the panel-* tokens below. Earlier the alert-* backgrounds were stronger
     (e.g. #e3f2fd info, #fff8e1 warning) than panel-* (e.g. #F7F8FE info,
     #FFFBEF warning), which made the same content read in two different
     tones depending on which class wrapped it. Per the design system rule
     of "one shade per role," alert + panel now share the same bg per
     family — borders and text accents carry the severity differentiation
     instead, since they're the load-bearing visual cue anyway. */
  --alert-warning-bg:      var(--panel-warning-bg);
  --alert-warning-border:  #ffe082;
  --alert-warning-text:    #6d4c00;
  --alert-info-bg:         var(--panel-info-bg);
  --alert-info-border:     #90caf9;
  --alert-info-text:       #0d47a1;
  --alert-error-bg:        var(--panel-error-bg);
  --alert-error-border:    #ef9a9a;
  --alert-error-text:      #c62828;
  --alert-success-bg:      var(--panel-success-bg);
  --alert-success-border:  #b7e1c3;
  --alert-success-text:    #1a7431;

  /* ── Panel Colors (component-level overrides) ─────────────────────────── */
  /* Panels are quieter than alerts — they recede behind form cards rather
     than demanding attention. Each family carries bg + text + accent
     (border / divider) so a panel can be themed in one place.

     Kept distinct from --alert-*-bg so in-form panels read as informational
     surfaces rather than alerts.

     Info uses a very soft lavender; warning a pale amber; success a pale
     mint; muted a neutral gray. Body-default text for full readability. */
  --panel-info-bg:         #F7F8FE;
  --panel-info-text:       var(--text-primary);
  --panel-info-accent:     #e2e6f5;

  --panel-warning-bg:      #FFFBEF;
  --panel-warning-text:    var(--text-primary);
  --panel-warning-accent:  #F5D880;

  --panel-success-bg:      #F1FAF3;
  --panel-success-text:    var(--text-primary);
  --panel-success-accent:  #BBE0C6;

  /* Panel-error sits one tone more saturated than the rest of the
     panel family on purpose: the dashboard's page background is
     --page-pink (#f9e0e6), and a too-soft error panel disappears into
     it. #fce4ec keeps the surface clearly readable on the pink page
     while still reading as a soft panel inside a white card.
     Same shade as --status-{reviews,draft-expired,denied}-bg, which
     gives the entire error family one canonical pink.

     For the LOUD-error tone used by the two severe dashboard states
     (DRAFT_EXPIRED, DENIED via variant: 'error-strong'), we reuse
     --page-pink-deep — the same deeper pink the header chrome uses.
     One darker pink token serves both surfaces that need to stand
     out from the gradient background, rather than maintaining two
     close-but-distinct values. */
  --panel-error-bg:        #fce4ec;
  --panel-error-text:      var(--text-primary);
  --panel-error-accent:    #F2C0CB;

  --panel-muted-bg:        #F4F4F4;
  --panel-muted-text:      var(--text-primary);
  --panel-muted-accent:    #DCDCDC;

  /* ── Soft informational surface (calm blue) ───────────────────────────────
     Used for "alternative path / non-error informational" surfaces like
     the alt-path prompt card ("Prefer to use the Referral Form?") and
     the timeout body on doc-review (Scenario 6, post-60s). Aliased to
     --panel-info-bg so the whole info family reads in one tone — the
     border carries the soft outline differentiation. */
  --surface-info-soft:     var(--panel-info-bg);
  --border-info-soft:      #dde6ef;

  /* ── Border Colors ────────────────────────────────────────────────────── */
  --border-light:          #e0e0e0;
  --border-medium:         #ccc;
  --border-dark:           #999;
  --border-input:          #999;
  --border-focus:          #c9283e;

  /* ── Disabled form controls (shared by input/select/textarea/radio/checkbox)
     so every control's disabled state is one consistent grey. ── */
  --field-disabled-bg:     #eeeeee;
  --field-disabled-border: #999999;
  --field-disabled-text:   #777777;

  /* ── Skeleton / Loading ───────────────────────────────────────────────── */
  --skeleton-bg:           #e9e9e9;
  --skeleton-shine:        #f5f5f5;

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-heading:          'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:             'Lora', Georgia, serif;
  --font-ui:               'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

  --font-size-2xs:         0.6875rem;  /* 11px — proto toolbar, dense chips */
  --font-size-xs:          0.8125rem;  /* 13px (was 0.75rem — smallest tier was too small for Montserrat to render comfortably) */
  --font-size-sm:          0.875rem;   /* 14px (was 0.8125rem — bumped one notch to keep the gap from xs) */
  --font-size-base:        1rem;       /* 16px */
  --font-size-md:          1.125rem;   /* 18px */
  --font-size-lg:          1.25rem;    /* 20px */
  --font-size-xl:          1.5rem;     /* 24px — default content size */
  --font-size-2xl:         1.75rem;    /* 28px */
  --font-size-3xl:         2rem;       /* 32px */
  --font-size-4xl:         2.25rem;    /* 36px — used by select hero placeholders */

  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-black:     900;

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

  /* ── Spacing Scale ────────────────────────────────────────────────────── */
  --space-3xs:             2px;
  --space-2xs:             6px;        /* between xs and sm — used for tight stacks */
  --space-xs:              4px;
  --space-sm:              8px;
  --space-2sm:             10px;       /* between sm and md — used for asymmetric padding */
  --space-md:              12px;
  --space-base:            16px;
  --space-lg:              20px;
  --space-xl:              24px;
  --space-2xl:             32px;
  --space-3xl:             40px;
  --space-4xl:             48px;
  --space-5xl:             64px;

  /* ── Border Radius ────────────────────────────────────────────────────── */
  --radius-xs:             3px;
  --radius-sm:             4px;
  --radius-md:             6px;
  --radius-lg:             8px;
  --radius-xl:             12px;
  --radius-pill:           999px;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --shadow-sm:             0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:             0 2px 8px rgba(0,0,0,0.1);
  --shadow-lg:             0 4px 20px rgba(0,0,0,0.12);
  --shadow-card:           0 1px 4px rgba(0,0,0,0.06);
  --shadow-card-hover:     0 2px 6px rgba(0,0,0,0.08);
  --shadow-modal:          0 8px 32px rgba(0,0,0,0.25);
  --shadow-dropdown:       0 4px 16px rgba(0,0,0,0.15);
  --shadow-toolbar:        0 -2px 12px rgba(0,0,0,0.3);
  --shadow-inset-focus:    inset 0 0 0 2px var(--border-focus);

  /* ── Overlays ─────────────────────────────────────────────────────────── */
  --overlay-modal:         rgba(0,0,0,0.5);

  /* ── Transitions ──────────────────────────────────────────────────────── */
  --transition-fast:       150ms ease;
  --transition-fast-200:   200ms ease;
  --transition-base:       250ms ease;
  --transition-slow:       400ms ease;

  /* ── Z-Index Scale ────────────────────────────────────────────────────── */
  --z-base:                1;
  --z-dropdown:            100;
  --z-sticky:              200;
  --z-modal-backdrop:      900;
  --z-modal:               1000;
  --z-modal-overlay:       2000;       /* full-screen overlay (scanning shroud, rescan failure modal) */
  --z-proto-toolbar:       9999;

  /* ── Layout Widths ────────────────────────────────────────────────────── */
  /* Content max-width — capped at 1440 to give wide-monitor users
     comfortable gutters and prevent the page from sprawling across an
     entire 27"+ display. Was 1736 historically; reduced because the
     redesign assumes a more focused reading column on every state. */
  --content-max-width:     1440px;
  --wizard-content-width:  680px;
  --sidebar-width:         240px;
  --stepper-width:         260px;
  --right-cta-width:       300px;       /* used by .dashboard-layout grid */

  /* Reading measure — caps the line length of any reading-text block
     (paragraphs, lists, summary panels). Without this, paragraphs stretch
     the full width of the wizard content area on wide monitors and become
     unreadable. Components that intentionally span the full width
     (e.g. full-bleed banners) override with max-width: none. */
  --reading-max-width:     800px;

  /* ── Prototype Toolbar Palette ────────────────────────────────────────────
     The yellow bar at the bottom is a prototype-only surface. It deliberately
     reads as out-of-product chrome (dark navy + gold accent) so reviewers
     can tell at a glance "this isn't part of the real app." Tokenized here
     so a future theming pass doesn't skip the bar — same discipline as the
     rest of the system, even though it never ships. */
  --proto-bg:              #1a1a2e;
  --proto-accent:          #ffd700;
  --proto-surface-1:       #2a2a4e;
  --proto-surface-2:       #3a3a6e;
  --proto-border:          #444;
  --proto-border-strong:   #ffd700;
  --proto-text:            #fff;
  --proto-text-muted:      #ccc;
  --proto-text-faint:      #aaa;
  --proto-active-bg:       var(--nyc-red);
  --proto-active-text:     #fff;
}