/* ============================================================
   CWDB Design System — Colors & Typography
   Columbia Windows Database · Internal CRM & Routing Tool
   ============================================================ */

/* ─── Base Color Tokens ──────────────────────────────────── */
:root {
  /* ─── Canonical color tokens ─────────────────────────────
     The BARE names (--bg, --accent, …) are the single source of truth
     (defined in app.css :root, used ~1,250×). The --cwdb-* names below
     are kept as thin ALIASES so the ~64 existing --cwdb-* references keep
     working, but they no longer hold their own hex — they resolve to the
     bare token. The `, #literal` fallback makes each alias robust even on
     a surface that somehow loads this file without app.css. */

  /* Backgrounds */
  --cwdb-bg:        var(--bg, #070b12);
  --cwdb-surface:   var(--surface, #0f1622);
  --cwdb-surface-2: var(--surface-2, #121c2b);
  --cwdb-surface-3: var(--surface-3, #18263a);

  /* Text */
  --cwdb-text:  var(--text, #ecf3ff);
  --cwdb-muted: var(--muted, #9db1cc);

  /* Accents */
  --cwdb-accent:   var(--accent, #66d6ff);     /* cyan — primary */
  --cwdb-accent-2: var(--accent-2, #8c7dff);   /* violet — secondary */
  --cwdb-danger:   var(--danger, #ff7b9c);     /* pink-red — errors/destructive */

  /* Borders */
  --cwdb-border: rgba(148, 196, 255, 0.20);

  /* Glow — primary accent glow ring */
  --cwdb-glow: 0 0 0 1px rgba(102, 214, 255, 0.20),
               0 0 35px rgba(102, 214, 255, 0.18);

  /* ─── Extended Semantic Palette (2026-06-16 tokenization) ─────────
     Names the colors that had sprawled to ~205 raw hexes across the
     operator CSS. Each token holds the EXACT value already in use, so
     swapping a hardcoded hex for var(--token) is a visual no-op; collapsing
     a future pass can harmonize near-duplicate shades onto these. The `-rgb`
     triplets follow the period-color convention below so tints can compose
     as rgba(var(--x-rgb), a). New hues (Warning, Info) are claimed in
     docs/AI_STYLE_GUIDE.md → Semantic Color Reservations. */

  /* Neutral */
  --white:        #ffffff;   /* collapses #fff + #ffffff (one white) */
  --accent-pale:  #d6f0ff;   /* pale cyan — text/icon on accent fills */

  /* Accent ramp (cyan — reserved 102,214,255) */
  --accent-deep:  #0a6193;   /* deep cyan — primary-button gradient stop */

  /* Success (green family — done / paid / positive) */
  --success-rgb:  110, 231, 168;            /* #6ee7a8 */
  --success:      rgba(var(--success-rgb), 1);
  --success-ink:  #166534;   /* dark green — text on light success fills */
  --success-bg:   #ecfff2;   /* pale green — success fill */

  /* Warning (yellow-amber — caution / attention; NOT the reserved
     Morning amber 255,200,102, which stays the ATSB period rail) */
  --warning-rgb:  255, 208, 102;            /* #ffd066 */
  --warning:      rgba(var(--warning-rgb), 1);
  --warning-ink:  #8a5a0c;   /* dark amber — text on light warning fills */
  --warning-bg:   #ffe4c4;   /* pale amber — warning fill */

  /* Danger ramp (pink-red — base --danger #ff7b9c lives in app.css) */
  --danger-rgb:    255, 123, 156;           /* #ff7b9c — for alpha composition */
  --danger-strong: #ff5d77;  /* stronger pink-red — emphasis */
  --danger-bg:     #ffd6d6;  /* pale red — danger fill */
  --danger-deep:   #b91c1c;  /* dark red — text on light danger fills */

  /* Info (indigo/blue — neutral-informational; claimed from Available list) */
  --info-rgb:   44, 78, 240;                /* #2c4ef0 */
  --info:       rgba(var(--info-rgb), 1);
  --info-soft:  #93c5fd;     /* pale blue — info fill/border */

  /* Surfaces — extend the dark ramp */
  --bg-deep:    #0b1119;     /* darker than --surface — recessed panels */
  --surface-4:  #2e3f57;     /* lighter than --surface-3 — raised chips/rows */

  /* Muted ramp */
  --muted-2:    #6b7d92;     /* dimmer than --muted — tertiary text */

  /* ─── Semantic Period Colors (DO NOT repurpose) ─── */
  --cwdb-morning-rgb:   255, 200, 102;   /* amber  — Morning period */
  --cwdb-afternoon-rgb: 102, 214, 255;   /* cyan   — Afternoon period */
  --cwdb-evening-rgb:   167, 139, 250;   /* violet — Evening period */
  --cwdb-setting-rgb:   34,  197, 94;    /* green  — Active setting band / success */
  --cwdb-sameday-rgb:   255, 122, 0;     /* orange — Same-day column */
  --cwdb-blocked-rgb:   239, 68,  68;    /* red    — Blocked / destructive */

  --cwdb-morning:   rgba(var(--cwdb-morning-rgb),   1);
  --cwdb-afternoon: rgba(var(--cwdb-afternoon-rgb), 1);
  --cwdb-evening:   rgba(var(--cwdb-evening-rgb),   1);
  --cwdb-success:   rgba(var(--cwdb-setting-rgb),   1);
  --cwdb-sameday:   rgba(var(--cwdb-sameday-rgb),   1);
  --cwdb-error:     rgba(var(--cwdb-blocked-rgb),   1);

  /* ─── Spacing Scale ──────────────────────────────── */
  --space-1:  0.25rem;   /* 4px  — micro gap */
  --space-2:  0.5rem;    /* 8px  — tight gap */
  --space-3:  0.75rem;   /* 12px — compact padding */
  --space-4:  1rem;      /* 16px — standard panel padding */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px — page section padding */
  --space-8:  2rem;      /* 32px — large section gap */
  --space-10: 2.5rem;    /* 40px */

  /* ─── Border Radii ───────────────────────────────── */
  --radius-pill:  999px;  /* chips, badges, brand pill */
  --radius-panel: 14px;   /* panels, page headers, modals, auth card */
  --radius-card:  12px;   /* table overflow, job cards, lanes */
  --radius-btn:   10px;   /* buttons, inputs, alerts */
  --radius-sm:    8px;    /* nav links, small controls */

  /* ─── Shadows ────────────────────────────────────── */
  --shadow-sm:    0 6px 14px rgba(4, 10, 16, 0.34);
  --shadow-md:    0 14px 30px rgba(4, 10, 16, 0.35);
  --shadow-lg:    0 20px 48px rgba(4, 10, 16, 0.65);
  --shadow-hover: 0 10px 20px rgba(4, 10, 16, 0.42);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* ─── Typography ─────────────────────────────────── */
  --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Mono", "Consolas", monospace;

  /* Size scale */
  --text-micro:  0.70rem;   /* 11.2px — micro labels, timestamps */
  --text-xs:     0.78rem;   /* 12.5px — welcome text, badge labels */
  --text-sm:     0.80rem;   /* 12.8px — nav links, muted hints */
  --text-base:   0.86rem;   /* 13.8px — body, form labels */
  --text-body:   0.90rem;   /* 14.4px — table cells, standard body */
  --text-md:     0.92rem;   /* 14.7px — table content */
  --text-lg:     1.00rem;   /* 16px   — card titles */
  --text-xl:     1.05rem;   /* 16.8px — drawer headings */
  --text-2xl:    1.25rem;   /* 20px   — section headings */
  --text-3xl:    1.45rem;   /* 23.2px — page h1 */

  /* Weight scale */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ─── Semantic Type Roles ────────────────────────── */
  --h1-size:   var(--text-3xl);
  --h1-weight: var(--weight-bold);
  --h1-leading: 1.2;

  --h2-size:   var(--text-2xl);
  --h2-weight: var(--weight-bold);
  --h2-leading: 1.25;

  --h3-size:   var(--text-lg);
  --h3-weight: var(--weight-semibold);
  --h3-leading: 1.3;

  --body-size:    var(--text-body);
  --body-weight:  var(--weight-regular);
  --body-leading: 1.45;

  --label-size:   var(--text-base);
  --label-weight: var(--weight-semibold);
  --label-color:  var(--cwdb-muted);

  --code-size:   0.82em;
  --code-family: var(--font-mono);

  /* ─── Surface Gradients (reusable) ──────────────── */
  --gradient-panel:  linear-gradient(160deg, rgba(20, 31, 47, 0.84), rgba(13, 20, 31, 0.84));
  --gradient-hero:   linear-gradient(135deg, rgba(22, 34, 52, 0.82), rgba(16, 24, 36, 0.82));
  --gradient-header: linear-gradient(180deg, rgba(32, 49, 73, 0.80), rgba(21, 32, 48, 0.80));
  --gradient-btn:    linear-gradient(180deg, rgba(23, 34, 51, 0.90), rgba(16, 24, 36, 0.92));
  --gradient-btn-primary: linear-gradient(180deg, rgba(27, 124, 150, 0.85), rgba(15, 84, 121, 0.94));
  --gradient-page-bg: radial-gradient(1200px 700px at 20% -10%, rgba(102, 214, 255, 0.15), transparent 60%);

  /* ─── Motion System ──────────────────────────────── */
  /* The single source of truth for animation across CWDB. CSS transitions,
     the View Transitions API, and the Motion One island all draw from THESE
     tokens so the whole app shares one feel. Keep the scale small on purpose
     — most UI should reach for --dur-2 / --ease-standard. */

  /* Durations — named by size, not by feature */
  --dur-1: 90ms;    /* micro   — hover/focus color + ring changes */
  --dur-2: 180ms;   /* base    — DEFAULT; chips, buttons, small reveals */
  --dur-3: 280ms;   /* medium  — drawers, accordions, card expand/collapse */
  --dur-4: 420ms;   /* large   — page / section transitions, hero reveals */

  /* Easings — named by intent, not by curve */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);      /* in+out, the default */
  --ease-entrance: cubic-bezier(0.05, 0.7, 0.1, 1); /* decelerate — arriving */
  --ease-exit:     cubic-bezier(0.3, 0, 0.8, 0.15); /* accelerate — leaving */
  --ease-emphasis: cubic-bezier(0.34, 1.4, 0.64, 1);/* slight overshoot — accents */

  /* Composite shorthands — drop straight into `transition:` */
  --motion-hover:  color var(--dur-1) var(--ease-standard),
                   background-color var(--dur-1) var(--ease-standard),
                   border-color var(--dur-1) var(--ease-standard),
                   box-shadow var(--dur-2) var(--ease-standard);
  --motion-base:   all var(--dur-2) var(--ease-standard);
  --motion-reveal: opacity var(--dur-3) var(--ease-entrance),
                   transform var(--dur-3) var(--ease-entrance);

  /* ─── Transition (legacy alias) ──────────────────── */
  /* DEPRECATED in favor of the motion scale above. Kept so existing
     `var(--transition-base)` consumers keep working during the migration;
     migrate them to --motion-base / a specific --dur-* + --ease-* pairing. */
  --transition-base: 0.20s ease;
}

/* ─── Global reduced-motion guard ────────────────────────── */
/* Unifies what is currently 6 per-file guards. Anyone who has asked their
   OS to reduce motion gets near-instant, non-animated UI everywhere — incl.
   View Transitions (Layer 3) and the Motion One island (Layer 4), which read
   this same preference. New CSS does NOT need its own guard; this covers it. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Semantic Utility Classes ───────────────────────────── */

/* Colors */
.cwdb-text        { color: var(--cwdb-text); }
.cwdb-muted       { color: var(--cwdb-muted); }
.cwdb-accent      { color: var(--cwdb-accent); }
.cwdb-accent-2    { color: var(--cwdb-accent-2); }
.cwdb-danger      { color: var(--cwdb-danger); }

/* Background fills */
.cwdb-bg          { background: var(--cwdb-bg); }
.cwdb-surface     { background: var(--cwdb-surface); }
.cwdb-surface-2   { background: var(--cwdb-surface-2); }

/* Type roles */
.cwdb-h1 {
  font-family: var(--font-sans);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-leading);
  color: var(--cwdb-text);
  margin: 0;
}

.cwdb-h2 {
  font-family: var(--font-sans);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-leading);
  color: var(--cwdb-text);
  margin: 0;
}

.cwdb-h3 {
  font-family: var(--font-sans);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-leading);
  color: var(--cwdb-text);
  margin: 0;
}

.cwdb-body {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
  color: var(--cwdb-text);
}

.cwdb-label {
  font-family: var(--font-sans);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  color: var(--label-color);
  letter-spacing: 0.01em;
}

.cwdb-label-upper {
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cwdb-muted);
}

.cwdb-tabular {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

.cwdb-code {
  font-family: var(--font-mono);
  font-size: var(--code-size);
  color: var(--cwdb-accent);
  background: rgba(102, 214, 255, 0.10);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}