/*
 * ECP Visual Design System tokens
 *
 * Authority: REQ-VISUAL-DESIGN v1.0 (commit 9f53d65) + ARCH-VISUAL-DESIGN v1.0 (commit f621d48).
 * Token catalog spec: docs/DESIGN.md (Impeccable Stitch format).
 * Extended: GH #275 — full Energy Cabo design system catalog from energy-cabo-design skill.
 *
 * Rules carried forward (BR-VIS-013, BR-VIS-014, BR-VIS-015):
 *   - OKLCH preferred over HSL: perceptually uniform, equal lightness steps look equal
 *   - Neutrals tint toward the brand hue (175, teal) with chroma 0.005 to 0.010
 *   - Never `#000` or `#fff`
 *   - Status communicated via icon + text + position; never color alone (BR-VIS-006)
 *
 * Sidebar palette (Stance A — INTAKE-2026-05-08-base-shell-ia-audit.md §Q3):
 *   The sidebar deliberately stays on the navy hex palette (#1B3A6B / #24477A / #132D54)
 *   anchored in tailwind.config.js, NOT migrated to the hue-175 family. This is a chrome-vs-content
 *   hierarchy device: navy = trust/chrome layer, teal hue 175 = brand/content layer. Future
 *   Impeccable critiques flagging "AdminLTE-default" should consult this rationale before re-flagging.
 *   Stance B (full hue-175 migration) remains an open follow-up; would require ~5 sidebar tokens
 *   + base.html surface utility migration. Not in scope for v1.0.
 *
 * Typography for ECP: system stack leads — no web fonts on internal screens.
 *   --font-display-brand / --font-body-brand are defined here for client-facing artifacts
 *   (proposals, website) ONLY. Do NOT apply to ECP screens without a separate intake
 *   (per energy-cabo-design skill guidance, GH #275).
 */

:root {
  /* ── Brand: BCS Ecosystem palette ──────────────────────────────────────
     Each name maps to a place, animal, or plant of Baja California Sur.
     Use HEX in Tailwind extends / SVG attrs; OKLCH in new CSS.          */
  --ec-mar-de-cortez:      #1B3A6B;  /* Navy — sidebar, headers, primary chrome */
  --ec-mar-de-cortez-deep: #132D54;  /* Darker navy — hover, depth */
  --ec-mar-de-cortez-mid:  #24477A;  /* Mid-navy — borders inside chrome */
  --ec-mar-de-cortez-light: #2D5494; /* Lighter navy — sidebar scrollbar thumb hover */
  --ec-bobo:               #50BB9B;  /* Teal — blue-footed booby. Accent. */
  --ec-bobo-hover:         #2AA8A0;  /* Deeper teal on hover */
  --ec-bobo-light:         #6ED4B3;  /* Subtle highlights, badge backgrounds */
  --ec-bobo-dark:          #3FA384;  /* Pressed state, secondary accent */
  --ec-arena:              #F5F0E8;  /* Medano sand — warm off-white surface */
  --ec-coral:              #E8735A;  /* Cabo Pulmo coral — destructive / alert */
  --ec-cardon:             #D4A855;  /* Cardon cactus gold — warning / premium */
  --ec-torote:             #C4883A;  /* Torote bark — deeper gold for tags */
  --ec-atardecer:          #F28C5A;  /* Pacific sunset — gradient stop */
  --ec-cielo:              #87CEEB;  /* Cabo sky — info accent, light themes */
  --ec-sal:                #FFFFFF;  /* Sal y arena — wave foam, pure white */

  /* ── Semantic: surface + foreground (light mode default) ─────────────── */
  --color-bg:          oklch(0.99 0.005 175);   /* Page background */
  --color-bg-elev:     #FFFFFF;                 /* Elevated cards */
  --color-bg-soft:     #F8F9FA;                 /* Subtle fill — inputs, hover wells */
  --color-bg-warm:     var(--ec-arena);         /* Warm surface — proposals */

  --color-fg:          oklch(0.20 0.010 175);   /* Body text */
  --color-fg-strong:   var(--ec-mar-de-cortez); /* Headings — navy */
  --color-fg-muted:    oklch(0.45 0.008 175);   /* Secondary labels */
  --color-fg-faint:    #94A3B8;                 /* Tertiary — timestamps, hints */

  --color-border:        #E5E7EB;  /* Default 1px hairline */
  --color-border-strong: #CED4DA;  /* Form input border */
  --color-divider:       #EEF1F4;  /* Inside-card dividers, fieldset row sep */

  /* ── Accent ────────────────────────────────────────────────────────────── */
  --color-accent:       var(--ec-bobo);
  --color-accent-hover: var(--ec-bobo-hover);
  --color-accent-soft:  oklch(0.92 0.04 175);
  --color-accent-dark:  var(--ec-bobo-dark);

  /* ── Status (paired-cue rule: icon + text + position; never color alone) ─ */
  --color-status-success: oklch(0.65 0.13 145);
  --color-status-warning: oklch(0.72 0.15 75);
  --color-status-error:   oklch(0.55 0.18 25);
  --color-status-info:    var(--ec-cielo);

  /* Status fills — ~10-14% saturation for badge/pill backgrounds */
  --color-success-soft: rgba(40, 167, 69, 0.10);
  --color-warning-soft: rgba(212, 168, 85, 0.14);
  --color-error-soft:   rgba(220, 53, 69, 0.10);
  --color-info-soft:    rgba(135, 206, 235, 0.18);

  /* Error extended scale (CLABE / critical-alert surfaces) */
  --color-error-bg:        oklch(0.96 0.03 25);   /* ≈ red-50  — light warning bg */
  --color-error-bg-deep:   oklch(0.15 0.09 25);   /* ≈ red-950 — dark pill bg */
  --color-error-mid:       oklch(0.70 0.13 25);   /* ≈ red-400 — animated dot */
  --color-error-dark:      oklch(0.22 0.09 25);   /* ≈ red-900 — struck-through text */
  --color-error-text-soft: oklch(0.80 0.08 25);   /* ≈ red-300 — label on dark bg */

  /* Success extended scale */
  --color-success-bg:     oklch(0.97 0.04 145);   /* ≈ green-50  — new-value bg */
  --color-success-dark:   oklch(0.22 0.08 145);   /* ≈ green-900 — text on light bg */
  --color-success-border: oklch(0.88 0.10 145);   /* ≈ green-200 — border */

  /* ── Pipeline stage colors ─────────────────────────────────────────────── */
  --stage-new_lead:               #94A3B8;
  --stage-qualifying:             #60A5FA;
  --stage-qualified:              #2563EB;
  --stage-analysis_scheduled:     #7C3AED;
  --stage-analysis_complete:      #8B5CF6;
  --stage-proposal_sent:          #D97706;
  --stage-contract_signed:        #EA580C;
  --stage-installation_scheduled: #0D9488;
  --stage-installation_complete:  #16A34A;
  --stage-maintenance:            #059669;
  --stage-delivered:              #0284C7;
  --stage-support:                #E11D48;
  --stage-closed_lost:            #6B7280;

  /* ── Typography: font families ──────────────────────────────────────────
     System stack is the ECP default — no web font request on internal screens.
     Brand fonts are for client-facing artifacts (proposals, website) only.  */
  --font-system:        system-ui, -apple-system, "Segoe UI Variable", BlinkMacSystemFont, sans-serif;
  --font-body:          system-ui, -apple-system, "Segoe UI Variable", BlinkMacSystemFont, sans-serif;
  --font-display:       system-ui, -apple-system, "Segoe UI Variable", BlinkMacSystemFont, sans-serif;
  --font-ui:            "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:          "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --font-display-brand: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;  /* proposals/website */
  --font-body-brand:    "Outfit", system-ui, -apple-system, sans-serif;             /* proposals/website */

  /* ── Typography: scale (1.25 modular) ──────────────────────────────────── */
  --fs-xs:   11px;   /* Labels, uppercase eyebrow text */
  --fs-sm:   13px;   /* Secondary, captions */
  --fs-base: 14px;   /* Body — ECP default */
  --fs-md:   16px;   /* Body — marketing default */
  --fs-lg:   18px;   /* Subheads */
  --fs-xl:   22px;   /* H3 */
  --fs-2xl:  28px;   /* H2 */
  --fs-3xl:  36px;   /* H1 — dashboard, page headers */
  --fs-4xl:  48px;   /* Display — hero */
  --fs-5xl:  64px;   /* Mega display — marketing hero */

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-base:   1.5;
  --lh-loose:  1.7;
  --line-height-base: 1.5;
  --type-scale-step:  1.25;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;   /* small caps / uppercase labels */
  --tracking-widest:   0.08em;   /* badge / KPI label */

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --motion-duration-instant:    100ms;
  --motion-duration-quick:      250ms;
  --motion-duration-deliberate: 400ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Spacing (Tailwind 4pt scale) ───────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ── Radii ──────────────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   6px;    /* inputs, small buttons */
  --radius-lg:   8px;    /* buttons, pills */
  --radius-xl:   12px;   /* cards, modules */
  --radius-2xl:  16px;   /* hero cards, marketing */
  --radius-full: 9999px;

  /* ── Shadows (cool teal-tinted blacks) ──────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(27, 58, 107, 0.04);
  --shadow-sm:   0 1px 3px rgba(27, 58, 107, 0.08);   /* table rows, default card */
  --shadow-md:   0 2px 12px rgba(27, 58, 107, 0.06);  /* admin module, fieldset */
  --shadow-lg:   0 4px 15px rgba(80, 187, 155, 0.30); /* button hover (teal lift) */
  --shadow-xl:   0 15px 35px rgba(27, 58, 107, 0.10); /* login card, modal */
  --shadow-navy: 0 4px 15px rgba(27, 58, 107, 0.25);  /* primary button hover */
}

/* ── Reduced-motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-instant:    0ms;
    --motion-duration-quick:      0ms;
    --motion-duration-deliberate: 0ms;
    --motion-ease: linear;
  }
}

/* ── Named themes (apply via data-theme="..." on <body>) ────────────────────── */

/* Dark — Mar de Cortez: the sea at night */
[data-theme="mar-de-cortez"] {
  --color-bg:           #0d1f3c;
  --color-bg-elev:      #14294F;
  --color-bg-soft:      #1B3A6B;
  --color-fg:           #E5EEFB;
  --color-fg-strong:    #FFFFFF;
  --color-fg-muted:     #92A8C8;
  --color-fg-faint:     #5E78A0;
  --color-border:       #24477A;
  --color-divider:      #1B3A6B;
  --color-accent:       var(--ec-bobo);
  --color-accent-hover: var(--ec-bobo-light);
  --color-accent-soft:  rgba(80, 187, 155, 0.18);
}

/* Dark — Atardecer: Pacific sunset, navy → plum */
[data-theme="atardecer"] {
  --color-bg:           #1c1130;
  --color-bg-elev:      #2A1D45;
  --color-bg-soft:      #3a2855;
  --color-fg:           #F5E7E0;
  --color-fg-strong:    #FFFFFF;
  --color-fg-muted:     #C8A89A;
  --color-fg-faint:     #8A6B5E;
  --color-border:       #4A3265;
  --color-divider:      #2A1D45;
  --color-accent:       var(--ec-atardecer);
  --color-accent-hover: var(--ec-coral);
  --color-accent-soft:  rgba(242, 140, 90, 0.18);
}

/* Dark — Pulmo: underwater at the reef */
[data-theme="pulmo"] {
  --color-bg:           #0a1a30;
  --color-bg-elev:      #112746;
  --color-bg-soft:      #1B3A6B;
  --color-fg:           #DCE8F5;
  --color-fg-strong:    #FFFFFF;
  --color-fg-muted:     #88A0BE;
  --color-fg-faint:     #4E6889;
  --color-border:       #1B3A6B;
  --color-divider:      #112746;
  --color-accent:       var(--ec-bobo);
  --color-accent-hover: var(--ec-bobo-light);
  --color-accent-soft:  rgba(80, 187, 155, 0.18);
  --color-status-error: var(--ec-coral);
}

/* Light — Medano: the beach at day, warm sand */
[data-theme="medano"] {
  --color-bg:           var(--ec-arena);
  --color-bg-elev:      #FFFFFF;
  --color-bg-soft:      #ECE5D8;
  --color-fg:           #2C3E50;
  --color-fg-strong:    var(--ec-mar-de-cortez);
  --color-fg-muted:     #6E7B89;
  --color-fg-faint:     #9AA5B3;
  --color-border:       #D9D0BE;
  --color-divider:      #E5DECC;
  --color-accent:       var(--ec-bobo);
  --color-accent-hover: var(--ec-bobo-hover);
}

/* Light — Cielo: clear day in Cabo (default light) */
[data-theme="cielo"] {
  --color-bg:           #FFFFFF;
  --color-bg-elev:      #FFFFFF;
  --color-bg-soft:      #E8F4F8;
  --color-fg:           #2C3E50;
  --color-fg-strong:    var(--ec-mar-de-cortez);
  --color-fg-muted:     #5A6C7D;
  --color-fg-faint:     #94A3B8;
  --color-border:       #DAE8EF;
  --color-divider:      #ECF4F8;
  --color-accent:       var(--ec-bobo);
  --color-accent-hover: var(--ec-bobo-hover);
}

/* Light — Torote: the golden desert */
[data-theme="torote"] {
  --color-bg:           var(--ec-arena);
  --color-bg-elev:      #FFFFFF;
  --color-bg-soft:      #F0E6D6;
  --color-fg:           #2C3E50;
  --color-fg-strong:    var(--ec-mar-de-cortez);
  --color-fg-muted:     #6E7B89;
  --color-fg-faint:     #A19577;
  --color-border:       #E0D2B6;
  --color-divider:      #ECDFC8;
  --color-accent:       var(--ec-torote);
  --color-accent-hover: var(--ec-cardon);
}