/* =============================================================
   File Pilot — Design Tokens
   Source: app/globals.css + app/layout.tsx (file-pilot repo)
   Stack: Tailwind v4 + shadcn/ui (new-york, neutral base)
   Default theme: DARK (next-themes, attribute="class")
   ============================================================= */

/* ---------- Fonts (self-hosted copies in /fonts) ---------- */
@font-face {
  font-family: "Geist";
  src: url("./fonts/Geist-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/GeistMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("./fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---------- Raw font variables (as set in app/layout.tsx) ---------- */
:root {
  --font-geist-sans: "Geist", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-geist-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
}

/* ---------- LIGHT theme (:root) ---------- */
:root {
  --radius: 0.625rem; /* 10px */

  --background: oklch(0.985 0 0);
  --foreground: oklch(0.145 0.015 260);

  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0.015 260);

  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0.015 260);

  --primary: oklch(0.37 0.08 155);           /* dark forest green */
  --primary-foreground: oklch(0.98 0 0);

  --secondary: oklch(0.965 0.002 260);
  --secondary-foreground: oklch(0.25 0.015 260);

  --muted: oklch(0.965 0.002 260);
  --muted-foreground: oklch(0.55 0.01 260);

  --accent: oklch(0.955 0.003 260);
  --accent-foreground: oklch(0.145 0.015 260);

  --destructive: oklch(0.577 0.245 27.325);

  --border: oklch(0.915 0.004 260);
  --input: oklch(0.915 0.004 260);
  --ring: oklch(0.37 0.08 155);

  --chart-1: oklch(0.37 0.08 155);
  --chart-2: oklch(0.60 0.10 155);
  --chart-3: oklch(0.50 0.06 260);
  --chart-4: oklch(0.75 0.12 155);
  --chart-5: oklch(0.45 0.04 260);

  --sidebar: oklch(0.98 0 0);
  --sidebar-foreground: oklch(0.25 0.015 260);
  --sidebar-primary: oklch(0.37 0.08 155);
  --sidebar-primary-foreground: oklch(0.98 0 0);
  --sidebar-accent: oklch(0.955 0.003 260);
  --sidebar-accent-foreground: oklch(0.145 0.015 260);
  --sidebar-border: oklch(0.915 0.004 260);
  --sidebar-ring: oklch(0.37 0.08 155);

  /* browser chrome color */
  --theme-color-light: #f5f2eb; /* warm cream */

  /* domain-specific verification palette (from verification-badge.tsx) */
  --verify-success-bg: #d1fae5;   /* emerald-100 */
  --verify-success-fg: #047857;   /* emerald-700 */
  --verify-warn-bg:    #ffedd5;   /* orange-100 */
  --verify-warn-fg:    #c2410c;   /* orange-700 */
}

/* ---------- DARK theme (.dark) — DEFAULT on File Pilot ---------- */
.dark {
  --background: oklch(0.15 0.02 145);        /* very dark green */
  --foreground: oklch(0.95 0 0);

  --card: oklch(0.20 0.02 145);
  --card-foreground: oklch(0.95 0 0);

  --popover: oklch(0.20 0.02 145);
  --popover-foreground: oklch(0.95 0 0);

  --primary: oklch(0.80 0.16 115);           /* bright lime green */
  --primary-foreground: oklch(0.15 0.02 145);

  --secondary: oklch(0.30 0.04 145);
  --secondary-foreground: oklch(0.95 0 0);

  --muted: oklch(0.25 0.02 145);
  --muted-foreground: oklch(0.70 0 0);

  --accent: oklch(0.75 0.15 115);
  --accent-foreground: oklch(0.15 0.02 145);

  --destructive: oklch(0.704 0.191 22.216);

  --border: oklch(1 0 0 / 18%);
  --input: oklch(1 0 0 / 22%);
  --ring: oklch(0.80 0.16 115);

  --chart-1: oklch(0.80 0.16 115);
  --chart-2: oklch(0.65 0.12 145);
  --chart-3: oklch(0.55 0.08 145);
  --chart-4: oklch(0.85 0.18 115);
  --chart-5: oklch(0.45 0.06 145);

  --sidebar: oklch(0.18 0.03 145);
  --sidebar-foreground: oklch(0.95 0 0);
  --sidebar-primary: oklch(0.80 0.16 115);
  --sidebar-primary-foreground: oklch(0.15 0.02 145);
  --sidebar-accent: oklch(0.25 0.03 145);
  --sidebar-accent-foreground: oklch(0.95 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.80 0.16 115);

  --theme-color-dark: #272b2a; /* dark green-charcoal */

  --verify-success-bg: rgb(6 78 59 / 0.30);   /* emerald-900/30 */
  --verify-success-fg: #34d399;               /* emerald-400 */
  --verify-warn-bg:    rgb(124 45 18 / 0.30); /* orange-900/30 */
  --verify-warn-fg:    #fb923c;               /* orange-400 */
}

/* ---------- Radius scale (from @theme inline) ---------- */
:root {
  --radius-sm: calc(var(--radius) - 4px);  /* 6px  */
  --radius-md: calc(var(--radius) - 2px);  /* 8px  */
  --radius-lg: var(--radius);              /* 10px */
  --radius-xl: calc(var(--radius) + 4px);  /* 14px */
  --radius-2xl: calc(var(--radius) + 8px); /* 18px */
  --radius-3xl: calc(var(--radius) + 12px);/* 22px */
  --radius-4xl: calc(var(--radius) + 16px);/* 26px */
}

/* ---------- Base layer (reproduces @layer base from globals.css) ---------- */
* {
  border-color: var(--border);
}
html {
  scroll-behavior: smooth;
  touch-action: manipulation;
  color-scheme: light;
}
html.dark { color-scheme: dark; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-geist-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}
h1, h2, h3 { text-wrap: balance; }
[id] { scroll-margin-top: 5rem; }

/* ---------- Semantic type scale ----------
   shadcn/ui doesn't hardcode a type scale — Tailwind classes drive it.
   These are the working conventions distilled from the button/card/input/badge
   components so non-Tailwind contexts can mirror them. */
h1, .type-display-xl {
  font-family: var(--font-geist-sans);
  font-size: clamp(2.75rem, 5vw + 1rem, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 600;
}
h2, .type-display-lg {
  font-family: var(--font-geist-sans);
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
}
h3, .type-heading {
  font-family: var(--font-geist-sans);
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
}
h4, .type-subheading {
  font-family: var(--font-geist-sans);
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 600;
}
p, .type-body {
  font-family: var(--font-geist-sans);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
}
small, .type-small {
  font-size: 0.875rem;
  line-height: 1.5;
}
.type-caption {
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--muted-foreground);
}
code, kbd, samp, pre, .type-code {
  font-family: var(--font-geist-mono);
  font-size: 0.875em;
}

/* .font-display — display utility used for hero emphasis (always italic serif) */
.font-display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ---------- Keyframes (from globals.css) ---------- */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-scale {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
.reveal { opacity: 0; }
.reveal.revealed { animation: reveal-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.reveal-scale.revealed { animation: reveal-scale 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }

.reveal-stagger > .reveal:nth-child(1) { animation-delay: 0ms; }
.reveal-stagger > .reveal:nth-child(2) { animation-delay: 80ms; }
.reveal-stagger > .reveal:nth-child(3) { animation-delay: 160ms; }
.reveal-stagger > .reveal:nth-child(4) { animation-delay: 240ms; }
.reveal-stagger > .reveal:nth-child(5) { animation-delay: 320ms; }
.reveal-stagger > .reveal:nth-child(6) { animation-delay: 400ms; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}
.animate-shake { animation: shake 0.5s ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  .animate-shake,
  .reveal.revealed,
  .reveal-scale.revealed {
    animation: none !important;
    transition: none !important;
  }
  .reveal, .reveal-scale { opacity: 1; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}