/* ==========================================================================
   ALWPro Design Tokens
   --------------------------------------------------------------------------
   One token file for both apps. Two layers:
     1. Primitives  (--teal-500, --space-4, ...)   raw values, never used in
                                                    components directly.
     2. Semantic    (--color-text, --surface, ...)  what components use.
   Dark mode later = redefine the semantic layer under [data-theme="dark"].
   Nothing in components.css references a primitive, so dark mode needs no
   component edits.

   Density: [data-density="comfortable"] (portal) and [data-density="compact"]
   (admin) set on <html> or <body>. Defaults to comfortable.
   ========================================================================== */

:root {
  /* ---------- 1. PRIMITIVES ---------- */

  /* Brand teal scale, anchored on #3FA7A3 (teal-500).
     Contrast on white:  500 = 2.89 (accent only), 600 = 4.75 (AA text),
     700 = 6.22 (AA, and AA on the gray page background too). */
  --teal-50:  #EEF8F7;
  --teal-100: #D7EFEE;
  --teal-200: #B4E2E0;
  --teal-300: #86CFCC;
  --teal-400: #5FBBB7;
  --teal-500: #3FA7A3;   /* brand */
  --teal-600: #2A7F7B;   /* button fills with white text */
  --teal-700: #236B68;   /* text links, icons that must read as text */
  --teal-800: #1C5654;
  --teal-900: #164544;

  /* Navy (secondary) */
  --navy-50:  #E8EEF4;
  --navy-100: #D3DDE7;
  --navy-300: #8FA3B8;
  --navy-500: #2D5480;
  --navy-700: #1F3C5A;   /* brand navy */
  --navy-900: #142A40;

  /* Neutrals, slightly cool to sit with the brand */
  --gray-0:   #FFFFFF;
  --gray-25:  #FAFBFB;
  --gray-50:  #F5F7F8;   /* page background */
  --gray-100: #EEF1F3;
  --gray-150: #E3E9EC;
  --gray-200: #D9E1E3;   /* brand border */
  --gray-300: #B9C6CC;
  --gray-400: #8FA0AC;
  --gray-500: #5F7180;   /* AA on white and on gray-50 */
  --gray-600: #5A6B7A;
  --gray-700: #3E4C58;
  --gray-800: #333333;   /* brand charcoal */
  --gray-900: #1B2229;

  /* Status scales: 50 = tint background, 500 = icon, 700 = text on tint/white */
  --green-50:  #E4F5EA;  --green-200: #B7E4C7;  --green-500: #22895E;  --green-700: #1B7A4B;
  --amber-50:  #FFF3DC;  --amber-200: #FBD98F;  --amber-500: #B45309;  --amber-700: #8A4B00;
  --red-50:    #FDECEA;  --red-200:   #F7B9B3;  --red-500:   #DC2626;  --red-700:   #B42318;
  --blue-50:   #E7F0FB;  --blue-200:  #BBD3F2;  --blue-500:  #2563EB;  --blue-700:  #1D5FA8;

  /* Type */
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing, 4px base */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */

  /* Corners: four sizes */
  --radius-sm: 6px;     /* chips, pills, small controls */
  --radius-md: 10px;    /* inputs, buttons */
  --radius-lg: 14px;    /* cards, sections */
  --radius-xl: 20px;    /* dialogs, sheets */
  --radius-full: 999px;

  /* Depth: only floating elements get a shadow */
  --shadow-none: none;
  --shadow-menu:   0 4px 16px rgba(31, 60, 90, 0.12), 0 1px 3px rgba(31, 60, 90, 0.08);
  --shadow-float:  0 12px 32px rgba(31, 60, 90, 0.16), 0 2px 6px rgba(31, 60, 90, 0.08);
  --shadow-sheet:  0 0 0 1px rgba(31, 60, 90, 0.06), -12px 0 40px rgba(31, 60, 90, 0.18);

  /* Motion: three durations */
  --dur-press: 120ms;   /* press, toggle, hover */
  --dur-state: 200ms;   /* item turning done, toast, next question */
  --dur-sheet: 280ms;   /* sheets, dialogs */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Targets */
  --target-min: 44px;

  /* Layout */
  --sidebar-width: 248px;
  --content-max: 1240px;
  --content-max-narrow: 760px;

  /* ---------- 2. SEMANTIC ---------- */

  /* Surfaces */
  --bg: var(--gray-50);
  --surface: var(--gray-0);
  --surface-2: var(--gray-100);        /* table headers, wells, paper frame */
  --surface-3: var(--gray-150);        /* progress tracks, skeleton base */
  --surface-sunken: var(--gray-25);
  --paper-frame: var(--gray-150);      /* neutral area behind fixed documents */
  --overlay: rgba(20, 42, 64, 0.42);

  /* Text */
  --text: var(--gray-800);
  --text-2: var(--gray-600);
  --text-3: var(--gray-500);
  --text-heading: var(--navy-700);
  --text-inverse: #FFFFFF;
  --text-placeholder: var(--gray-500);
  --text-disabled: var(--gray-400);
  --text-link: var(--teal-700);
  --text-link-hover: var(--teal-800);

  /* Borders */
  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --border-input: var(--gray-300);
  --border-control: #7A8A98;           /* checkbox and radio rings, 3.5:1 */

  /* Brand application */
  --primary: var(--teal-600);          /* fills with white text */
  --primary-hover: var(--teal-700);
  --primary-active: var(--teal-800);
  --primary-accent: var(--teal-500);   /* selection, progress, large accents */
  --primary-soft: var(--teal-50);      /* selected row, selected choice tint */
  --primary-soft-border: var(--teal-200);
  --primary-text: var(--teal-700);
  --secondary: var(--navy-700);

  /* Focus */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--teal-600);
  --focus-ring-inset: inset 0 0 0 2px var(--teal-600);

  /* Status: good / attention / problem / info, plus neutral */
  --good-bg: var(--green-50);     --good-border: var(--green-200);   --good-icon: var(--green-500);  --good-text: var(--green-700);
  --attn-bg: var(--amber-50);     --attn-border: var(--amber-200);   --attn-icon: var(--amber-500);  --attn-text: var(--amber-700);
  --bad-bg:  var(--red-50);       --bad-border:  var(--red-200);     --bad-icon:  var(--red-500);    --bad-text:  var(--red-700);
  --info-bg: var(--blue-50);      --info-border: var(--blue-200);    --info-icon: var(--blue-500);   --info-text: var(--blue-700);
  --neutral-bg: var(--gray-100);  --neutral-border: var(--gray-200); --neutral-icon: var(--gray-500); --neutral-text: var(--gray-600);

  --danger: var(--red-700);
  --danger-hover: #951D14;

  /* Sidebar (navy) */
  --nav-bg: var(--navy-700);
  --nav-text: #C9D2DB;                 /* 7.4:1 on navy */
  --nav-text-muted: #9DACBD;           /* 4.9:1 on navy */
  --nav-text-active: #FFFFFF;
  --nav-active-bg: rgba(255, 255, 255, 0.10);
  --nav-active-accent: var(--teal-300);
  --nav-hover-bg: rgba(255, 255, 255, 0.06);
  --nav-border: rgba(255, 255, 255, 0.10);

  /* ---------- 3. TYPE SCALE (density sets the actual values) ---------- */
  /* Comfortable (portal) defaults. Body 16, floor 12 for captions. */
  --text-display: 2rem;      /* 32 */
  --text-title: 1.625rem;    /* 26 */
  --text-heading: 1.25rem;   /* 20 */
  --text-subheading: 1.0625rem; /* 17 */
  --text-body: 1rem;         /* 16 */
  --text-small: 0.875rem;    /* 14 */
  --text-caption: 0.8125rem; /* 13 */

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;

  /* Density-driven component metrics (comfortable) */
  --control-h: 2.75rem;         /* 44 */
  --control-h-sm: 2.25rem;      /* 36, secondary controls in dense toolbars */
  --control-h-lg: 3.25rem;      /* 52, primary portal buttons and choices */
  --control-px: 1rem;
  --row-py: 0.875rem;           /* list / table row vertical padding */
  --row-px: 1rem;
  --card-pad: 1.5rem;
  --section-gap: 1.5rem;
  --page-pad: 2rem;
  --field-gap: 1.25rem;
}

/* ---------- Compact density (admin) ---------- */
[data-density="compact"] {
  --text-display: 1.75rem;   /* 28 */
  --text-title: 1.375rem;    /* 22 */
  --text-heading: 1.0625rem; /* 17 */
  --text-subheading: 0.9375rem; /* 15 */
  --text-body: 0.875rem;     /* 14 */
  --text-small: 0.8125rem;   /* 13 */
  --text-caption: 0.75rem;   /* 12 */

  --control-h: 2.25rem;      /* 36; click target reaches 44 via row spacing on desktop pointer */
  --control-h-sm: 2rem;      /* 32 */
  --control-h-lg: 2.75rem;   /* 44 */
  --control-px: 0.75rem;
  --row-py: 0.5rem;
  --row-px: 0.75rem;
  --card-pad: 1.125rem;
  --section-gap: 1.125rem;
  --page-pad: 1.5rem;
  --field-gap: 0.875rem;
}

/* Touch devices get 44px targets even in compact density. */
@media (pointer: coarse) {
  [data-density="compact"] {
    --control-h: 2.75rem;
    --control-h-sm: 2.75rem;
  }
}

/* ---------- Dark mode stub (out of scope now; structure is ready) ----------
   When dark mode is added, only this block is written. Components stay as is.

[data-theme="dark"] {
  --bg: #0F171E;
  --surface: #162029;
  --surface-2: #1C2832;
  --surface-3: #243240;
  --paper-frame: #0B1116;
  --overlay: rgba(0, 0, 0, 0.6);
  --text: #E6EBEF;
  --text-2: #AAB8C4;
  --text-3: #8A9AA8;
  --text-heading: #E6EBEF;
  --text-link: var(--teal-300);
  --border: #2A3744;
  --border-strong: #3A4959;
  --border-input: #3A4959;
  --primary: var(--teal-500);
  --primary-hover: var(--teal-400);
  --primary-soft: rgba(63, 167, 163, 0.14);
  --good-bg: rgba(34, 137, 94, 0.18);  --good-text: #7CD3A6; ...
  --attn-bg: rgba(180, 83, 9, 0.18);   --attn-text: #F3C26B; ...
  --bad-bg:  rgba(220, 38, 38, 0.18);  --bad-text:  #F5A3A3; ...
  --info-bg: rgba(37, 99, 235, 0.18);  --info-text: #A7C4F5; ...
  --shadow-menu: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-float: 0 12px 32px rgba(0,0,0,0.6);
}
---------------------------------------------------------------------------- */

/* Reduce motion: every duration collapses to effectively zero. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 1ms;
    --dur-state: 1ms;
    --dur-sheet: 1ms;
  }
}