/* =============================================================================
   Zoe Design Language (ZDL) — Design Tokens

   Professional legal-tech design system.
   Landing/marketing pages use light mode.
   Authenticated app uses dark mode (user-toggleable).
   ============================================================================= */

/* ── Self-hosted webfonts ──
   WOFF2 files sourced from the Fontsource project (SIL OFL / Apache
   2.0). Files live at `core/static/core/fonts/`; URLs here are
   relative to this stylesheet's location
   (`core/static/core/css/tokens.css`), so served paths resolve to
   `/static/core/fonts/<file>.woff2`.

   Self-hosting avoids the Google Fonts CDN — which would otherwise
   leak visitor IPs to a US ad-tech surface and create a GDPR exposure
   inappropriate for a legal-tech app. `font-display: swap` matches the
   perf hint `next/font/google` would have set.

   Weights bundled: Inter 400/500/600/700, DM Serif Display 400, Geist
   Mono 400/500 — the set referenced by globals.css and landing.css. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.da03732a27e1.woff2") format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500.51205681a1ba.woff2") format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600.2ede57db1a3a.woff2") format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700.8ca0a5155296.woff2") format('woff2');
}

@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-serif-display-400.c27d5a47c09e.woff2") format('woff2');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/geist-mono-400.a4a4e4403db8.woff2") format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/geist-mono-500.ae01b1891171.woff2") format('woff2');
}

:root {
  /* ── Brand Colors — Midnight Navy ── */
  --color-brand-50:  #F8FAFC;
  --color-brand-100: #F1F5F9;
  --color-brand-200: #E2E8F0;
  --color-brand-300: #CBD5E1;
  --color-brand-400: #94A3B8;
  --color-brand-500: #64748B;
  --color-brand-600: #475569;
  --color-brand-700: #334155;
  --color-brand-800: #1E293B;
  --color-brand-900: #0F172A;

  /* ── AI Tech Accent — Indigo Violet ── */
  --color-accent-50:  #F5F3FF;
  --color-accent-100: #EDE9FE;
  --color-accent-200: #DDD6FE;
  --color-accent-300: #C4B5FD;
  --color-accent-400: #A78BFA;
  --color-accent-500: #8B5CF6;
  --color-accent-600: #7C3AED;

  /* ── Semantic Colors ── */
  --color-success: hsl(152, 30%, 45%);
  --color-warning: hsl(38, 50%, 55%);
  --color-error:   hsl(0, 50%, 55%);
  --color-info:    hsl(210, 40%, 55%);

  /* ── Typography ── */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif:   'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-mono:    'Geist Mono', 'Fira Code', 'JetBrains Mono', monospace;
  --font-display: var(--font-serif);

  --text-xs:    0.75rem;
  --text-sm:    0.8125rem;
  --text-base:  0.875rem;
  --text-md:    1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   2rem;
  --text-4xl:   2.5rem;
  --text-5xl:   3.5rem;
  --text-6xl:   4.5rem;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;

  /* ── Spacing Scale ── */
  --space-0:  0;
  --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: 3.25rem;
  --space-16: 4.5rem;
  --space-20: 6rem;
  --space-24: 8rem;

  /* ── Border Radius ── */
  --radius-sm:   0.125rem;
  --radius-md:   0.25rem;
  --radius-lg:   0.375rem;
  --radius-xl:   0.5rem;
  --radius-2xl:  1rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px hsla(220, 15%, 15%, 0.03);
  --shadow-sm:  0 2px 4px hsla(220, 15%, 15%, 0.05);
  --shadow-md:  0 4px 12px hsla(220, 15%, 15%, 0.07);
  --shadow-lg:  0 12px 32px hsla(220, 15%, 15%, 0.1);
  --shadow-xl:  0 24px 64px hsla(220, 15%, 15%, 0.12);

  /* ── Transitions ── */
  --ease-default: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);

  --duration-fast:    150ms;
  --duration-normal:  300ms;
  --duration-slow:    500ms;
  --duration-slower:  800ms;

  /* ── Z-Index Scale ── */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   20;
  --z-overlay:  30;
  --z-modal:    40;
  --z-toast:    50;

  /* ── Layout ── */
  --sidebar-width: 280px;
  --sidebar-width-collapsed: 72px;
  --header-height: 72px;
  --max-content-width: 1200px;
  --chat-max-width: 800px;

  /* ── Light Mode (Professional Tech) ── */
  --color-bg-primary:    #FAFAF9;
  --color-bg-secondary:  #F5F5F4;
  --color-bg-tertiary:   #E7E5E4;
  --color-bg-elevated:   #FFFFFF;
  --color-bg-hover:      #F5F5F4;
  --color-bg-active:     #EEEDEC;

  --color-surface:       #FFFFFF;
  --color-surface-hover: #F8FAFC;

  --color-text-primary:   #1E293B; /* Brand-800 */
  --color-text-secondary: #475569; /* Brand-600 */
  --color-text-tertiary:  #94A3B8; /* Brand-400 */
  --color-text-inverse:   #FFFFFF;

  --color-border:        #E2E8F0; /* Brand-200 */
  --color-border-subtle: #F1F5F9; /* Brand-100 */
  --color-border-focus:  #8B5CF6; /* Accent-500 */

  --color-input-bg:      #FFFFFF;
  --color-input-border:  #E2E8F0;

  color-scheme: light;
}

/* =============================================================================
   Dark Mode (for authenticated app)
   ============================================================================= */

[data-theme="dark"] {
  --color-bg-primary:    hsl(220, 25%, 8%);
  --color-bg-secondary:  hsl(220, 25%, 11%);
  --color-bg-tertiary:   hsl(220, 20%, 15%);
  --color-bg-elevated:   hsl(220, 20%, 13%);
  --color-bg-hover:      hsl(220, 20%, 18%);
  --color-bg-active:     hsl(220, 20%, 22%);

  --color-surface:       hsl(220, 20%, 13%);
  --color-surface-hover: hsl(220, 20%, 16%);

  --color-text-primary:   hsl(220, 20%, 95%);
  --color-text-secondary: hsl(220, 15%, 65%);
  --color-text-tertiary:  hsl(220, 10%, 45%);
  --color-text-inverse:   hsl(220, 25%, 8%);

  --color-border:        hsl(220, 15%, 20%);
  --color-border-subtle: hsl(220, 15%, 16%);
  --color-border-focus:  var(--color-brand-400);

  --color-input-bg:      hsl(220, 20%, 12%);
  --color-input-border:  hsl(220, 15%, 22%);

  --shadow-xs:  0 1px 2px hsla(0, 0%, 0%, 0.12);
  --shadow-sm:  0 1px 3px hsla(0, 0%, 0%, 0.16), 0 1px 2px hsla(0, 0%, 0%, 0.1);
  --shadow-md:  0 4px 8px hsla(0, 0%, 0%, 0.16), 0 2px 4px hsla(0, 0%, 0%, 0.1);
  --shadow-lg:  0 8px 24px hsla(0, 0%, 0%, 0.2), 0 4px 8px hsla(0, 0%, 0%, 0.1);

  color-scheme: dark;
}