/* stylelint-disable value-keyword-case declaration-block-single-line-max-declarations no-invalid-position-at-import-rule */

/* ── Cascade Layers — Explicit ordering for specificity control ──── */
@layer tokens, base, components, pages, utilities;

@import url("/assets/css/design-tokens/tokens.css");

/* ── Evident Technologies LLC — Gemstone Design Tokens ────────────────
   Gemstone Identity: Sapphire + Labradorite + Gold
   Premium law-firm authority meets forensic-grade precision.
   Dark: Labradorite/Obsidian depth • Light: Selenite/Pearl warmth
   Gold for premium authority • Sapphire for trust
   ──────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Canonical Brand Identity ─────────────────────────────────── */
  --brand-ink: #0f172a;
  --brand-paper: #f8fafc;
  --brand-gold: #f7b32b;
  --brand-ruby: #c41e3a;
  --brand-cobalt: #2f5d9f;
  --brand-mist: #d7e0ea;
  --brand-steel: #475569;
  --brand-verdigris: #4d7c6f; /* Evident — aged Roman bronze legal seal tone */

  /* ── Core Brand Palette ─────────────────────────────────────────── */
  --color-primary: var(--brand-cobalt);
  --color-primary-light: #4d78bf;
  --color-primary-dark: #1d447a;
  --color-accent: var(--brand-gold);
  --color-accent-light: #f9c458;
  --color-accent-dark: #d79211;
  --color-accent-contrast: #825a1e;
  --color-neutral: #e8eef5;
  --color-bg: #f3f6fb;
  --color-text: var(--brand-ink);
  --color-text-muted: var(--brand-steel);
  --color-on-dark: var(--brand-paper);
  --color-on-dark-muted: var(--brand-mist);

  /* ── Extended Gemstone Palette ──────────────────────────────────── */
  --color-sapphire: var(--brand-cobalt);
  --color-labradorite: #2d3f6e;
  --color-gold: var(--brand-gold);
  --color-tanzanite: #4a2db5;
  --color-ruby: var(--brand-ruby);
  --color-emerald: #0a6840;
  --color-obsidian: var(--brand-ink);
  --color-nuummite: #141e30;
  --color-pearl: #e9eef8;
  --color-selenite: #f4f7ff;
  --color-moonstone: #dfe8f8;

  /* ── Semantic Surface Tokens ────────────────────────────────────── */
  --surface-base: var(--color-bg);
  --surface-card: rgb(255 255 255 / 76%);
  --surface-card-solid: #fff;
  --surface-elevated: rgb(255 255 255 / 92%);
  --surface-inset: rgb(26 32 64 / 3%);
  --surface-overlay: rgb(14 21 40 / 60%);

  /* ── Border Tokens ──────────────────────────────────────────────── */
  --border-subtle: color-mix(in srgb, var(--color-labradorite) 12%, white);
  --border-default: color-mix(in srgb, var(--color-labradorite) 20%, white);
  --border-strong: color-mix(in srgb, var(--color-labradorite) 32%, white);
  --border-accent: color-mix(in srgb, var(--color-accent) 40%, transparent);

  /* ── Shadow Scale ───────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgb(14 21 40 / 4%);
  --shadow-sm: 0 2px 8px rgb(14 21 40 / 5%), 0 1px 2px rgb(14 21 40 / 3%);
  --shadow-md: 0 4px 24px rgb(14 21 40 / 7%), 0 1px 4px rgb(14 21 40 / 3%);
  --shadow-lg: 0 12px 40px rgb(14 21 40 / 9%), 0 2px 8px rgb(14 21 40 / 4%);
  --shadow-xl: 0 24px 64px rgb(14 21 40 / 12%), 0 4px 16px rgb(14 21 40 / 5%);
  --shadow-glow-primary: 0 0 32px rgb(31 58 153 / 16%);
  --shadow-glow-accent: 0 0 32px rgb(200 140 0 / 14%);

  /* ── Spacing Scale ──────────────────────────────────────────────── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* ── Responsive Surface Formulas ──────────────────────────────── */

  /* Shared formulas for launch scenes, app consoles, and dense     */

  /* review surfaces. These are intentionally fluid so each surface  */

  /* can preserve rhythm without bespoke breakpoint math.            */
  --surface-gap-1: clamp(0.75rem, 0.62rem + 0.45vw, 1rem);
  --surface-gap-2: clamp(1rem, 0.82rem + 0.7vw, 1.35rem);
  --surface-gap-3: clamp(1.4rem, 1.08rem + 1.2vw, 2rem);
  --surface-gap-4: clamp(2rem, 1.45rem + 2.2vw, 3.5rem);
  --surface-gap-5: clamp(3rem, 2.2rem + 3vw, 5.5rem);
  --surface-shell-gutter: clamp(1rem, 0.72rem + 1vw, 1.75rem);
  --surface-card-pad: clamp(1rem, 0.82rem + 0.7vw, 1.45rem);
  --surface-card-pad-compact: clamp(0.875rem, 0.76rem + 0.4vw, 1.1rem);
  --surface-card-pad-relaxed: clamp(1.2rem, 0.98rem + 1vw, 1.85rem);
  --surface-marketing-max: clamp(72rem, 94vw, 80rem);
  --surface-console-max: clamp(68rem, 92vw, 86rem);
  --surface-readable-max: 66ch;

  /* ── Persona and Contrast Governance ──────────────────────────── */
  --persona-authority-bg: #0e1528;
  --persona-authority-bg-elevated: #16233d;
  --persona-authority-accent: #5ea8ff;
  --persona-authority-accent-soft: rgb(94 168 255 / 14%);
  --persona-authority-text: #f7f3ea;
  --persona-authority-text-muted: #b5c0d4;
  --persona-clarity-bg: #f4f7ff;
  --persona-clarity-bg-elevated: #fff;
  --persona-clarity-accent: #1f3a99;
  --persona-clarity-accent-soft: rgb(31 58 153 / 8%);
  --persona-clarity-text: #1a2040;
  --persona-clarity-text-muted: #5a6080;
  --contrast-high-on-dark: #f7f3ea;
  --contrast-medium-on-dark: #c5d1e4;
  --contrast-high-on-light: #111827;
  --contrast-medium-on-light: #4b5563;

  /* ── Radius Scale ───────────────────────────────────────────────── */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-full: 999px;

  /* ── Typography — Common English Law stack ──────────────────────── */
  /* Display : Playfair Display — Baskerville lineage, court-letterhead gravitas  */
  /* Body    : Lora             — Calligraphic serif, law-review readability      */
  /* UI      : Inter            — Neutral sans for nav, buttons, form labels      */
  /* Mono    : Courier Prime    — Court-document / transcript authority           */
  --font-display: "Playfair Display", "Georgia", "Times New Roman", serif;
  --font-serif: "Lora", "Georgia", "Times New Roman", serif;
  --font-sans: "Inter", "system-ui", "-apple-system", "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
  --font-mono: "Courier Prime", "Courier New", "Courier", monospace;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  --line-height-tight: 1.1;
  --line-height-snug: 1.3;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.8;

  /* ── Type Scale ─────────────────────────────────────────────────── */
  --type-xs: 0.75rem; /* 12px — captions, badges */
  --type-sm: 0.8125rem; /* 13px — secondary text, labels */
  --type-base: 0.9375rem; /* 15px — body text */
  --type-md: 1.125rem; /* 18px — subheadings */
  --type-lg: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); /* 20–24px — section titles */
  --type-xl: clamp(1.75rem, 1.5rem + 0.75vw, 2rem); /* 28–32px — page titles */
  --type-2xl: clamp(2.25rem, 1.75rem + 1.5vw, 2.75rem); /* 36–44px — hero headlines */

  /* ── Brand Type Roles ──────────────────────────────────────────── */
  --type-brand-kicker: 0.75rem;
  --type-brand-ui: 0.9375rem;
  --type-brand-heading: clamp(2.25rem, 4vw, 4.5rem);
  --type-brand-title: clamp(1.65rem, 2.6vw, 2.6rem);
  --type-brand-mono: 0.8125rem;
  --tracking-brand-kicker: 0.18em;
  --tracking-brand-heading: -0.02em;
  --tracking-brand-title: -0.01em;

  /* ── Tier Colors ────────────────────────────────────────────────── */
  --tier-free: #6b7280;
  --tier-starter: var(--color-primary);
  --tier-core: var(--color-accent);
  --tier-complete: var(--color-tanzanite);
  --tier-team: #6366f1;
  --tier-department: #d946ef;
  --tier-enterprise: var(--color-ruby);

  /* ── Motion ─────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* ── Z-Index Stack ───────────────────────────────────────────────
     Canonical hierarchy — use these tokens; never hardcode z-index.
     Higher = closer to user.
  ─────────────────────────────────────────────────────────────── */
  --z-dropdown: 3010; /* .site-header dropdown panels */
  --z-header: 3000; /* .site-header (marketing/discovery sticky) */
  --z-app-bar: 2900; /* .app-bar (authenticated workspace nav) */
  --z-case-bar: 2800; /* .case-header (EDRM 7-stage progress bar) */
  --z-auth-nav: 2000; /* .guest-header (auth & legal pages) */
  --z-landing: 1000; /* .landing-nav (homepage standalone) */
  --z-sticky: 100; /* generic sticky content blocks — NOT for headers */

  /* ── Layout ─────────────────────────────────────────────────────── */
  --max-width: 1200px;
  --max-width-narrow: 760px;
  --max-width-wide: 1400px;
  --site-header-height: 6.25rem;
  --app-bar-height: 44px;
  --spacing-base: 1rem;
  --site-max-width: 1200px;

  /* ── Computed Surfaces (used by core components) ─────────────────── */
  --surface-muted: color-mix(in srgb, var(--color-primary) 6%, white);
  --shadow-soft: 0 18px 40px rgb(18 29 62 / 10%);

  /* ── Glass Layer Tokens ─────────────────────────────────────────── */
  --glass-bg: rgb(255 255 255 / 55%);
  --glass-bg-strong: rgb(255 255 255 / 76%);
  --glass-border: rgb(255 255 255 / 60%);
  --glass-blur: blur(16px) saturate(1.4);
  --glass-shadow: var(--shadow-md), inset 0 1px 0 rgb(255 255 255 / 80%);

  /* ── Section Flow Tokens (Alternating + Seamless Transitions) ────── */
  --section-light-a: var(--color-selenite);
  --section-light-b: var(--color-pearl);
  --section-light-c: var(--color-moonstone);
  --section-dark-a: linear-gradient(140deg, #0e1528 0%, #1b2f57 52%, #2d3f6e 100%);
  --section-dark-b: linear-gradient(145deg, #0a1a6e 0%, #1f3a99 55%, #4a2db5 100%);
  --section-dark-c: linear-gradient(150deg, #101b34 0%, #162a4b 48%, #1f3a99 100%);
  --section-seam-size: clamp(2.5rem, 6vw, 4.5rem);

  /* ── Component Aliases ──────────────────────────────────────────── */

  /* Shorthand aliases consumed by homepage, marketing, and section   */

  /* components. Source-of-truth remains the canonical tokens above.  */

  /* Color aliases */
  --ev-navy: var(--color-obsidian);
  --ev-navy-light: var(--color-nuummite);
  --ev-navy-lighter: var(--color-labradorite);
  --ev-slate: #334155;
  --ev-slate-light: var(--color-text-muted);
  --ev-slate-lighter: #94a3b8;
  --ev-accent: var(--color-primary);
  --ev-accent-hover: var(--color-primary-dark);
  --ev-accent-light: var(--color-primary-light);
  --ev-accent-bg: color-mix(in srgb, var(--color-primary) 8%, transparent);
  --ev-gold: var(--color-accent);
  --ev-gold-light: var(--color-accent-light);

  /* Surface aliases */
  --ev-bg: var(--color-bg);
  --ev-bg-alt: var(--color-neutral);
  --ev-bg-warm: var(--color-selenite);
  --ev-bg-dark: var(--color-obsidian);
  --ev-bg-card: var(--surface-card-solid);
  --ev-border: var(--border-default);
  --ev-border-hover: var(--border-strong);

  /* Text aliases */
  --ev-text: var(--color-text);
  --ev-text-secondary: var(--color-text-muted);
  --ev-text-muted: #94a3b8;
  --ev-text-inverse: #f0ece8;

  /* Typography aliases */
  --ev-font: var(--font-sans);
  --ev-font-display: var(--font-display);
  --ev-font-serif: var(--font-serif);
  --ev-font-mono: var(--font-mono);

  /* Spacing aliases */
  --ev-space-xs: var(--space-xs);
  --ev-space-sm: var(--space-sm);
  --ev-space-md: var(--space-md);
  --ev-space-lg: var(--space-lg);
  --ev-space-xl: var(--space-xl);
  --ev-space-2xl: var(--space-2xl);
  --ev-space-3xl: var(--space-3xl);
  --ev-space-4xl: var(--space-4xl);

  /* Radius aliases */
  --ev-radius-sm: var(--radius-sm);
  --ev-radius-md: var(--radius-md);
  --ev-radius-lg: var(--radius-lg);
  --ev-radius-xl: var(--radius-xl);
  --ev-radius-full: var(--radius-full);

  /* Shadow aliases */
  --ev-shadow-sm: var(--shadow-sm);
  --ev-shadow-md: var(--shadow-md);
  --ev-shadow-lg: var(--shadow-lg);
  --ev-shadow-xl: var(--shadow-xl);

  /* Transition aliases */
  --ev-transition: var(--duration-fast) var(--ease-out);
  --ev-transition-slow: var(--duration-slow) var(--ease-in-out);

  /* Section palette aliases */
  --ev-section-light-a: var(--color-bg);
  --ev-section-light-b: var(--color-neutral);
  --ev-section-light-c: var(--color-moonstone);
  --ev-section-dark-a: var(--section-dark-a);
  --ev-section-dark-b: var(--section-dark-b);
  --ev-section-dark-c: linear-gradient(150deg, #1a1040 0%, #3d1f8a 45%, #6a4bcf 100%);

  /* Phase colors */
  --ev-phase-emerald: var(--color-emerald);
  --ev-phase-blue: var(--color-primary);
  --ev-phase-amber: var(--color-accent);
  --ev-phase-ruby: var(--color-ruby);

  /* Tier color aliases */
  --ev-tier-free: var(--tier-free);
  --ev-tier-starter: var(--tier-starter);
  --ev-tier-core: var(--tier-core);
  --ev-tier-complete: var(--tier-complete);
  --ev-tier-enterprise: var(--tier-enterprise);

  /* Contrast-safe text pairs */
  --ev-on-light-a: var(--color-text);
  --ev-on-light-b: var(--color-text);
  --ev-on-light-c: var(--color-text);
  --ev-on-dark-a: var(--gem-labradorite-text, #c8e6f9);
  --ev-on-dark-b: var(--gem-sapphire-text, #d0dcff);
  --ev-on-dark-muted: var(--color-on-dark-muted);

  /* CTA transition bridge */
  --ev-cta-floor: color-mix(in srgb, var(--gem-sapphire-flat, #1f3a99) 55%, var(--gem-labradorite-flat, #2d3f6e));
}

/* ── Dark Theme Tokens ──────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0e1528;
    --color-text: #e2e8f0;
    --color-text-muted: #94a3b8;
    --surface-base: #0e1528;
    --surface-card: rgb(22 32 56 / 76%);
    --surface-card-solid: #162038;
    --surface-elevated: rgb(30 44 72 / 92%);
    --surface-inset: rgb(255 255 255 / 4%);
    --surface-overlay: rgb(0 0 0 / 70%);
    --border-subtle: rgb(255 255 255 / 8%);
    --border-default: rgb(255 255 255 / 12%);
    --border-strong: rgb(255 255 255 / 20%);
    --shadow-xs: 0 1px 2px rgb(0 0 0 / 20%);
    --shadow-sm: 0 2px 8px rgb(0 0 0 / 24%);
    --shadow-md: 0 4px 24px rgb(0 0 0 / 28%);
    --shadow-lg: 0 12px 40px rgb(0 0 0 / 32%);
    --shadow-xl: 0 24px 64px rgb(0 0 0 / 40%);
    --glass-bg: rgb(22 32 56 / 55%);
    --glass-bg-strong: rgb(22 32 56 / 76%);
    --glass-border: rgb(255 255 255 / 10%);
    --glass-shadow: var(--shadow-md), inset 0 1px 0 rgb(255 255 255 / 6%);
  }
}

/* Utility classes for layout components */
.container {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}