/* ============================================================================
   DDPM-Portal · DESIGN TOKENS  (single source of truth)
   ----------------------------------------------------------------------------
   Every color, space, radius, shadow, and type value in the portal is defined
   here as a CSS custom property. NOTHING else in the codebase hardcodes a hex
   or a pixel value — components reference var(--token).  Governance rule:
   "No new hardcoded values — add a token first."  (See docs/design-system.md)

   Brand palette derived from the Design District logo:
     • Teal   #207088  — dominant logo color → PRIMARY (accessible: white text 5.7:1)
     • Peach  #F4B49C  — exact logo coral/peach → soft decorative tint
     • Coral  #E07A55  — deeper accessible accent derived from the peach → ACCENT
   ============================================================================ */

:root {
  /* ── Brand: Teal (primary) ─────────────────────────────────────────────── */
  --color-teal-900: #103745;
  --color-teal-800: #144A5A;
  --color-teal-700: #1A5C70;
  --color-teal-600: #207088;   /* ★ logo teal — primary */
  --color-teal-500: #2E8499;
  --color-teal-300: #6BA8B8;
  --color-teal-100: #CFE2E8;
  --color-teal-50:  #EAF3F5;

  /* ── Brand: Coral / Peach (accent) ─────────────────────────────────────── */
  --color-coral-700: #B8542F;
  --color-coral-600: #C9613D;
  --color-coral-500: #E07A55;  /* ★ accent — CTAs (large/bold), highlights */
  --color-peach-400: #F4B49C;  /* ★ logo peach — soft tints, badges */
  --color-peach-200: #FBD9CB;
  --color-peach-100: #FDECE4;

  /* ── Brand: Cream / neutral surfaces ───────────────────────────────────── */
  --color-cream-200: #ECE3D4;
  --color-cream-100: #F6F0E6;  /* ★ app background */
  --color-white:     #FFFFFF;

  /* ── Neutral slate ramp (text + borders) ───────────────────────────────── */
  --color-slate-900: #23272E;
  --color-slate-800: #2B2F36;  /* body text */
  --color-slate-600: #4A515B;
  --color-slate-500: #5B6470;  /* muted text */
  --color-slate-400: #8A929E;
  --color-slate-300: #B9C0C8;
  --color-slate-200: #DCE1E6;  /* borders */
  --color-slate-100: #EDF0F2;  /* subtle dividers / hover bg */
  --color-slate-50:  #F5F7F8;

  /* ── Semantic state colors (brand-harmonized, AA on white) ─────────────── */
  --color-success-600: #1E9E5A;  --color-success-50: #E7F6EE;
  --color-warning-600: #D9892A;  --color-warning-50: #FBF0DF;
  --color-danger-600:  #D64545;  --color-danger-50:  #FBE9E9;
  --color-info-600:    #207088;  --color-info-50:    #EAF3F5;

  /* ========================================================================
     SEMANTIC ALIASES  — components use THESE, not raw color steps above.
     ======================================================================== */
  --bg:              var(--color-cream-100);
  --surface:         var(--color-white);
  --surface-alt:     var(--color-slate-50);
  --surface-sunken:  var(--color-cream-200);

  --text:            var(--color-slate-800);
  --text-strong:     var(--color-slate-900);
  --text-muted:      var(--color-slate-500);
  --text-on-primary: var(--color-white);
  --text-on-accent:  var(--color-white);

  --border:          var(--color-slate-200);
  --border-strong:   var(--color-slate-300);
  --divider:         var(--color-slate-100);

  --primary:         var(--color-teal-600);
  --primary-hover:   var(--color-teal-700);
  --primary-active:  var(--color-teal-800);
  --primary-soft:    var(--color-teal-50);
  --primary-soft-border: var(--color-teal-100);

  --accent:          var(--color-coral-500);
  --accent-hover:    var(--color-coral-600);
  --accent-soft:     var(--color-peach-100);

  --focus-ring:      0 0 0 3px rgba(32, 112, 136, 0.35);  /* teal @ 35% */

  --success: var(--color-success-600); --success-soft: var(--color-success-50);
  --warning: var(--color-warning-600); --warning-soft: var(--color-warning-50);
  --danger:  var(--color-danger-600);  --danger-soft:  var(--color-danger-50);
  --info:    var(--color-info-600);    --info-soft:    var(--color-info-50);

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
               Consolas, monospace;

  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.8125rem;  /* 13px */
  --fs-base: 0.875rem;   /* 14px — data-dense app base */
  --fs-md:   1rem;       /* 16px */
  --fs-lg:   1.125rem;   /* 18px */
  --fs-xl:   1.375rem;   /* 22px */
  --fs-2xl:  1.75rem;    /* 28px */
  --fs-3xl:  2.25rem;    /* 36px */

  --lh-tight:   1.2;
  --lh-base:    1.5;
  --lh-relaxed: 1.65;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Spacing scale (4px base) ──────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Radius ────────────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ── Shadows (warm-tinted, subtle) ─────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(35, 39, 46, 0.06), 0 1px 1px rgba(35, 39, 46, 0.04);
  --shadow-md: 0 2px 4px rgba(35, 39, 46, 0.06), 0 4px 12px rgba(35, 39, 46, 0.08);
  --shadow-lg: 0 8px 24px rgba(35, 39, 46, 0.12), 0 2px 6px rgba(35, 39, 46, 0.08);

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --sidebar-w:     248px;
  --topbar-h:      60px;
  --container-max: 1280px;

  /* ── Z-index scale ─────────────────────────────────────────────────────── */
  --z-base:           1;
  --z-dropdown:    1000;
  --z-sticky:      1020;
  --z-modal-backdrop: 1040;
  --z-modal:       1050;
  --z-toast:       1080;

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}