/* OWLS design tokens — source of truth. Do not inline-copy. Link from HTML files via <link rel="stylesheet" href="assets/owls-tokens.css">. */

:root {
  /* ── Gray Scale (cool blue-gray, anchored #CED2D8) ── */
  --gray-50: #F7F7F8;
  --gray-100: #EFF0F1;
  --gray-200: #DEE0E2;
  --gray-300: #D0D3D8;   /* anchor = OWLS heading */
  --gray-400: #B0B6BF;
  --gray-500: #8891A0;
  --gray-600: #647081;
  --gray-700: #495260;
  --gray-800: #303640;
  --gray-900: #191E24;
  --gray-950: #0F1115;

  /* ── Accent Scale (coral pink, anchored #FF5073) ── */
  --accent-50: #FAF5F6;
  --accent-100: #F6E4E8;
  --accent-200: #F1C6CE;
  --accent-300: #ED97A8;
  --accent-400: #F4718B;
  --accent-500: #FF5073;  /* base = OWLS secondary */
  --accent-600: #F91F4B;
  --accent-700: #D50B34;
  --accent-800: #A00D2A;
  --accent-900: #6E0C20;
  --accent-950: #430A15;

  /* ── Indigo Scale (navy→periwinkle, anchored #6372C0, hue 230°) ── */
  /* Near-triadic (118°) pairing with the coral accent. Used for
   * functional UI: primary CTAs, focus rings, links. The saturation
   * dips slightly in the mid tones (≈39–42%) for a "professional /
   * grown up" feel, then spikes at the dark end (70–100%) to give
   * the navy shades weight. Blue at matching step is ~4–8% darker
   * in measured L% than coral — this is intentional to compensate
   * for the Helmholtz–Kohlrausch perceptual-brightness bias. */
  --indigo-50:  #F4F6FB;  /* ~97% L — subtle hover bg */
  --indigo-100: #E8ECF7;  /* ghost-white */
  --indigo-200: #C0C9E7;  /* periwinkle */
  --indigo-300: #98A5D7;  /* wisteria-blue */
  --indigo-400: #7F8DCC;  /* wisteria-blue-2 */
  --indigo-500: #6372C0;  /* glaucous — base */
  --indigo-600: #4C5CAC;  /* slate-indigo */
  --indigo-700: #344598;  /* french-blue — primary CTA */
  --indigo-800: #212F7D;  /* true-cobalt — CTA hover */
  --indigo-900: #111D62;  /* deep-navy — CTA active */
  --indigo-950: #000B47;  /* deep-navy-2 */

  /* ── Semantic aliases ── */
  --owls-primary: var(--gray-800);
  --owls-secondary: var(--accent-500);
  --owls-heading: var(--gray-300);
  --owls-validation: #D50B34;
  --owls-selection: #FFFFFF;
  --owls-label: var(--gray-600);
  /* Focus: interactive state (keyboard/mouse). Distinct from .selected
   * and active brand states which stay coral. */
  --owls-focus-border: var(--gray-600);
  --owls-focus-ring: rgba(100, 112, 129, 0.2);   /* gray-600 @ 20% */
  --owls-focus-ring-subtle: rgba(100, 112, 129, 0.12); /* gray-600 @ 12% */

  /* Functional Colors */
  --owls-header-bg: var(--gray-950);           /* Full-width near-black bar */
  --owls-sidebar-bg: var(--gray-50);
  --owls-section-heading-bg: var(--accent-500); /* Coral pink — matches header */
  --owls-section-heading-color: #fff;
  --owls-field-border: var(--gray-300);
  --owls-field-bg: #fff;
  --owls-grid-header-bg: var(--gray-800);
  --owls-grid-header-color: #fff;
  --owls-grid-alt-row: var(--gray-50);
  --owls-grid-selected: var(--accent-100);
  --owls-grid-hover: var(--gray-100);
  /* Primary CTA — gray scale. Neutral, professional buttons. */
  --owls-btn-primary-bg: var(--gray-800);
  --owls-btn-primary-hover: var(--gray-900);
  --owls-btn-primary-active: var(--gray-950);
  --owls-btn-action-bg: #FF8C42;
  --owls-btn-action-hover: #e67a30;
  --owls-btn-green-bg: #34AD6C;    /* Used sparingly: Search, Get Sales Details */
  --owls-btn-green-hover: #2D9A5E;
  --owls-btn-blue-bg: var(--indigo-600);
  --owls-btn-blue-hover: var(--indigo-700);

  /* State Colors */
  --owls-state-success: #34AD6C;       /* valid field / complete section */
  --owls-state-error: var(--owls-validation);  /* alias — error = validation */
  --owls-state-warning: #F59E0B;       /* incomplete / touched section */
  --owls-state-calculated-bg: var(--gray-50);  /* read-only calc field bg */
  --owls-state-calculated-border: var(--indigo-600); /* calc field left accent */

  /* Motion */
  --owls-motion-accordion: 150ms ease-out;   /* section expand/collapse */
  --owls-motion-feedback: 200ms ease-in;     /* toast / inline feedback */

  /* Radii */
  --owls-radius-chip: 999px;                 /* pill-shaped toggle chips */
  --owls-radius-card-tier: 12px;             /* cover tier card corners */

  /* Typography */
  --owls-font-family: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --owls-font-size-base: 0.875rem;   /* 14px at 16px root */
  --owls-font-size-sm: 0.75rem;     /* 12px */
  --owls-font-size-lg: 1.125rem;    /* 18px */
  --owls-font-size-h1: 1.75rem;     /* 28px */
  --owls-font-size-h2: 1.25rem;     /* 20px */
  --owls-font-size-h3: 1rem;        /* 16px */
  --owls-line-height: 1.5;

  /* Spacing */
  --owls-field-padding: 4px 8px;
  --owls-section-padding: 10px 15px;
  --owls-card-padding: 15px;
}

/* ── Spacing System ───────────────────────────── */
/*
 * 4px base unit. All spacing derives from multiples:
 *   xs: 4px   (icon gaps, inline padding)
 *   sm: 8px   (field internal padding, tight groups)
 *   md: 12px  (between fields, label-to-input)
 *   lg: 16px  (between sections, card padding)
 *   xl: 24px  (between major groups, section heading margin)
 *   2xl: 32px (between page sections)
 */
:root {
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;

  /* Shadow Scale (replaces hard borders on cards) */
  --owls-shadow-xs:  0 1px 2px rgba(0,0,0,.05);
  --owls-shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --owls-shadow-md:  0 4px 16px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);

  /* Page background (warm off-white so white cards float) */
  --owls-page-bg: var(--gray-100);

  /* Semantic gap aliases (maps to space scale) */
  --gap-label:         var(--space-xs);   /* 4px  — label → input */
  --gap-field:         var(--space-lg);   /* 16px — field → field */
  --gap-group:         var(--space-xl);   /* 24px — sub-group label → fields */
  --gap-section-inner: var(--space-2xl);  /* 32px — between sub-groups */
  --gap-section-outer: var(--space-xl);   /* 24px — between section cards */

  /* Radii */
  --owls-radius-input:  6px;
  --owls-radius-button: 6px;
  --owls-radius-card:   12px;
  --owls-radius-seg:    8px;
}