/* LawFlux tokens — flattened for deployment */

/* ── tokens/fonts.css ── */
/* Brand serif — Lora, self-hosted from the desktop app (apps/desktop/src/renderer/assets/fonts).
   Weight 600 only: the single weight the app's `font-serif` uses (page headings are semibold).
   The LEXTRUM wordmark is Lora 500 converted to outlines, so headings match the mark. SIL OFL 1.1. */
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url('assets/lora-latin-600.woff2') format('woff2')}

/* ── tokens/colors.css ── */
/* Structural colour. Ported 1:1 from apps/desktop/src/renderer/styles/globals.css, where every
   token is an HSL channel triple consumed as hsl(var(--token)). Both forms are published: the
   `--*-hsl` triple (drop-in for the app's Tailwind theme) and a resolved hex for static design work.
   Light mode only — dark mode is v1.5+ in the product, so it is deliberately absent here. */
:root{
  /* ── raw HSL triples (the app's contract): channel triples consumed as hsl(var(--token)) ── */
  --background-hsl:0 0% 100%; /* @kind other */
  --foreground-hsl:222.2 84% 4.9%; /* @kind other */
  --card-hsl:0 0% 100%; /* @kind other */
  --card-foreground-hsl:222.2 84% 4.9%; /* @kind other */
  --popover-hsl:0 0% 100%; /* @kind other */
  --popover-foreground-hsl:222.2 84% 4.9%; /* @kind other */
  --primary-hsl:222.2 47.4% 11.2%; /* @kind other */
  --primary-foreground-hsl:210 40% 98%; /* @kind other */
  --secondary-hsl:210 40% 96.1%; /* @kind other */
  --secondary-foreground-hsl:222.2 47.4% 11.2%; /* @kind other */
  --muted-hsl:210 40% 96.1%; /* @kind other */
  --muted-foreground-hsl:215.4 16.3% 46.9%; /* @kind other */
  --accent-hsl:210 40% 96.1%; /* @kind other */
  --accent-foreground-hsl:222.2 47.4% 11.2%; /* @kind other */
  --destructive-hsl:0 72.2% 50.6%; /* @kind other */
  --destructive-foreground-hsl:210 40% 98%; /* @kind other */
  --border-hsl:214.3 31.8% 91.4%; /* @kind other */
  --input-hsl:214.3 31.8% 91.4%; /* @kind other */
  --ring-hsl:222.2 84% 4.9%; /* @kind other */

  /* ── resolved semantic colour (use these in static HTML/CSS) ── */
  --background:#ffffff;          /* page canvas */
  --foreground:#020817;          /* body ink */
  --card:#ffffff;                /* panel surface */
  --card-foreground:#020817;
  --popover:#ffffff;
  --popover-foreground:#020817;
  --primary:#0f172a;             /* ink button — the app's one primary CTA colour */
  --primary-foreground:#f8fafc;
  --secondary:#f1f5f9;           /* quiet fill: secondary button, progress track */
  --secondary-foreground:#0f172a;
  --muted:#f1f5f9;               /* muted fill: tab list, nav rail wash, subtle rows */
  --muted-foreground:#64748b;    /* secondary text */
  --accent:#f1f5f9;              /* hover fill for ghost/outline controls */
  --accent-foreground:#0f172a;
  --destructive:#dc2626;
  --destructive-foreground:#f8fafc;
  --border:#e2e8f0;              /* 1px hairline */
  --input:#e2e8f0;               /* control border */
  --ring:#020817;                /* 2px focus ring, always with a 2px offset */

  /* Nav-rail zinc ramp — AppShell states these literally, not through the semantic tokens. */
  --nav-idle:#52525b;            /* zinc-600 */
  --nav-hover-bg:#f4f4f5;        /* zinc-100 */
  --nav-hover-fg:#18181b;        /* zinc-900 */
  --nav-active-bg:#e4e4e7;       /* zinc-200 */
  --nav-active-fg:#18181b;
  --row-hover:#fafafa99;         /* zinc-50/60 — StepRow hover */

  /* ── brand marks (Lextrum logo kit; fixed colours, never themed) ── */
  --brand-espresso:#2A211A;      /* wordmark on light, icon tile, dark panels */
  --brand-cream:#FAF7F0;         /* canvas / reversed wordmark / icon bars */
  --brand-burnt-orange:#C2410C;  /* accent: the prism, focus, CTAs in brand contexts */
}

/* ── tokens/status.css ── */
/* Domain colour — the meaning-bearing states an attorney reads off the dashboard.
   Ported from apps/desktop/src/renderer/Tokens.ts, which maps them to Tailwind's stock palette.
   THE LOAD-BEARING RULE: colour is never the only signal. Every one of these pairs with a Lucide
   icon (see status.md / StatusBadge) — a badge built from a token cannot be colour-only. */
:root{
  /* Applicability outcomes — in_scope / partial_support / out_of_scope / refused */
  --outcome-in-scope-border:#a7f3d0;   --outcome-in-scope-bg:#ecfdf5;   --outcome-in-scope-text:#047857;   --outcome-in-scope-accent:#059669;
  --outcome-partial-border:#fde68a;    --outcome-partial-bg:#fffbeb;    --outcome-partial-text:#92400e;    --outcome-partial-accent:#d97706;
  --outcome-out-border:#fecaca;        --outcome-out-bg:#fef2f2;        --outcome-out-text:#b91c1c;        --outcome-out-accent:#dc2626;
  --outcome-refused-border:#fca5a5;    --outcome-refused-bg:#fee2e2;    --outcome-refused-text:#991b1b;    --outcome-refused-accent:#b91c1c;

  /* Hard-stop banners run one shade heavier than the badge. */
  --banner-in-scope-text:#064e3b;
  --banner-partial-text:#78350f;
  --banner-out-text:#7f1d1d;   --banner-out-border:#fca5a5;
  --banner-refused-text:#450a0a; --banner-refused-border:#f87171; --banner-refused-bg:#fee2e2;

  /* Step statuses — the 7-value lifecycle */
  --step-pending-border:#e2e8f0;  --step-pending-bg:#f8fafc;  --step-pending-text:#475569;  --step-pending-accent:#94a3b8;
  --step-running-border:#bfdbfe;  --step-running-bg:#eff6ff;  --step-running-text:#1d4ed8;  --step-running-accent:#3b82f6;
  --step-review-border:#fde68a;   --step-review-bg:#fffbeb;   --step-review-text:#92400e;   --step-review-accent:#d97706;
  --step-complete-border:#a7f3d0; --step-complete-bg:#ecfdf5; --step-complete-text:#047857; --step-complete-accent:#059669;
  --step-failed-border:#fecaca;   --step-failed-bg:#fef2f2;   --step-failed-text:#b91c1c;   --step-failed-accent:#dc2626;
  --step-rejected-border:#fed7aa; --step-rejected-bg:#fff7ed; --step-rejected-text:#c2410c; --step-rejected-accent:#ea580c;
  --step-stale-border:#fde047;    --step-stale-bg:#fefce8;    --step-stale-text:#854d0e;    --step-stale-accent:#ca8a04;

  /* Ownership classes — who may edit a step's output */
  --own-engine-border:#e2e8f0;    --own-engine-bg:#f8fafc;    --own-engine-text:#475569;    --own-engine-accent:#64748b;
  --own-shared-border:#bfdbfe;    --own-shared-bg:#eff6ff;    --own-shared-text:#1d4ed8;    --own-shared-accent:#3b82f6;
  --own-human-border:#a7f3d0;     --own-human-bg:#ecfdf5;     --own-human-text:#047857;     --own-human-accent:#059669;
  --own-immutable-border:#6ee7b7; --own-immutable-bg:#d1fae5; --own-immutable-text:#065f46; --own-immutable-accent:#047857;

  /* Artifact versions */
  --version-approved-border:#a7f3d0;  --version-approved-bg:#ecfdf5;  --version-approved-text:#047857;
  --version-draft-border:#fde68a;     --version-draft-bg:#fffbeb;     --version-draft-text:#92400e;
  --version-superseded-border:#e2e8f0;--version-superseded-bg:#f8fafc;--version-superseded-text:#64748b;

  /* Staleness alert surface (yellow-300 / yellow-50 / yellow-900 + a yellow-100/60 row) */
  --stale-alert-border:#fde047; --stale-alert-bg:#fefce8; --stale-alert-text:#713f12; --stale-alert-row:#fef9c399;

  /* Synthetic-data / dev banner (amber-200 / amber-50 / amber-900) */
  --notice-border:#fde68a; --notice-bg:#fffbeb; --notice-text:#78350f;
}

/* ── tokens/typography.css ── */
/* Type. Two families only: a platform sans for everything, and Lora for page titles —
   matched to the LEXTRUM wordmark. Sizes are the app's literal values, not a rounded scale. */
:root{
  --font-sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-serif:'Lora','Iowan Old Style',Palatino,serif; /* page titles only — Georgia deliberately excluded */
  --font-mono:'SF Mono',Menlo,Consolas,'Liberation Mono',monospace; /* signature fingerprints, ids */

  /* Sizes — literal app values */
  --text-xs:0.75rem;    --leading-xs:1rem;
  --text-sm:0.875rem;   --leading-sm:1.25rem;   /* the workhorse: body, rows, buttons, inputs */
  --text-base:1rem;     --leading-base:1.5rem;
  --text-lg:1.125rem;   --leading-lg:1.75rem;   /* CardTitle, DialogTitle */
  --text-onboarding-body:15px;                  /* the first-run pane's body size */
  --text-screen-title:1.75rem;                  /* ScreenHeader h1, serif semibold, leading-tight */
  --text-onboarding-title:2.3rem;               /* first-run display heading, serif, leading 1.15 */

  --weight-normal:400; /* @kind font */ --weight-medium:500; --weight-semibold:600;

  --leading-tight:1.25; /* @kind font */ --leading-snug:1.15; --leading-normal:1.5; --leading-relaxed:1.625;

  /* Tracking — the eyebrow/overline treatments */
  --tracking-tight:-0.025em; /* @kind font */   /* CardTitle / DialogTitle */
  --tracking-wide:0.025em; /* @kind font */     /* uppercase micro-labels: "Step 2 of 5 · Medical chronology" */
  --tracking-eyebrow:0.14em; /* @kind font */   /* first-run eyebrow */
  --tracking-wordmark:0.12em; /* @kind font */  /* LEXTRUM lettering */
}

/* ── tokens/spacing.css ── */
/* Spacing — a 4px base. These are the steps the app actually uses. */
:root{
  --space-0-5:2px; --space-1:4px; --space-1-5:6px; --space-2:8px; --space-2-5:10px;
  --space-3:12px; --space-3-5:14px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;

  /* Composed rhythm */
  --card-padding:24px;          /* CardHeader / CardContent / CardFooter p-6 */
  --card-gap:6px;               /* CardHeader space-y-1.5 */
  --screen-padding:24px;        /* screen shell p-6 */
  --section-gap:32px;           /* between screen sections */
  --row-gap:8px;                /* between checklist rows */
  --row-padding-y:10px;         /* StepRow py-2.5 */
  --row-padding-x:12px;
  --chrome-height:56px;         /* nav header + top bar are both pinned to h-14 so borders align */
  --control-height:40px;        /* Button/Input/Select default h-10 */
  --control-height-sm:36px;     /* size="sm" h-9 */
  --control-height-lg:44px;     /* size="lg" h-11 */
  --nav-rail-width:15%; /* @kind spacing */         /* resizable 4–25%; collapses to a 4% icon rail */
  --onboarding-rail-width:320px;/* md:w-80 */
  --pane-max-width:36rem;       /* first-run pane max-w-xl */
}

/* ── tokens/shape.css ── */
/* Radii, borders, elevation. --radius is the one knob: it was raised from shadcn's 8px to 12px
   so panels read as floating pills rather than boxy chips. */
:root{
  --radius:0.75rem;                        /* 12px — rounded-lg */
  --radius-md:calc(var(--radius) - 2px);   /* 10px — buttons, inputs, selects */
  --radius-sm:calc(var(--radius) - 4px);   /* 8px  — tab triggers, menu items */
  --radius-card:1rem;                      /* 16px — Card (rounded-2xl) */
  --radius-pill:9999px;                    /* badges, progress bars, stepper dots */

  --border-width:1px;
  --border-color:var(--border); /* @kind color */

  /* Elevation — Tailwind's default shadow ramp, used sparingly. */
  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1); /* Card default */
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1); /* Dialog, Toast */

  --overlay:rgb(0 0 0 / 0.5); /* @kind color */              /* dialog scrim — flat black, no blur */
  --focus-ring-width:2px;
  --focus-ring-offset:2px;
}

/* ── tokens/motion.css ── */
/* Motion. Short, functional, and always reduced-motion aware — the app gates every entrance
   transition behind motion-safe / prefers-reduced-motion. Nothing bounces; nothing decorates. */
:root{
  --duration-fast:150ms; /* @kind other */   /* colour transitions on hover/press */
  --duration-base:200ms; /* @kind other */   /* nav collapse, dialog zoom+fade, accordion, step body enter */
  --duration-slow:300ms; /* @kind other */   /* progress-bar width, first-run pane fade-in */
  --ease-out:cubic-bezier(0,0,0.2,1); /* @kind other */
  --ease-in-out:cubic-bezier(0.4,0,0.2,1); /* @kind other */
  --dialog-enter:fade-in 0 + zoom-in 95%; /* @kind other */   /* documented shape, not a usable value */
}
@media (prefers-reduced-motion:reduce){
  :root{--duration-fast:0ms; /* @kind other */ --duration-base:0ms; /* @kind other */ --duration-slow:0ms /* @kind other */}
}

/* ── tokens/onboarding.css ── */
/* First-run only. A SCOPED warm palette — not a theme fork. Read by the two-pane first-run
   wizard and nothing else; the workspace stays on the neutral tokens. The clay accent appears on
   the journey stepper and small details ONLY — never as a button fill (the CTA stays ink). */
:root{
  --ob-parchment:#f4efe4;  /* left/ground warmth (chosen, not stark white) */
  --ob-paper:#fcfaf4;      /* right pane */
  --ob-espresso:#201b14;   /* rail base */
  --ob-espresso-hi:#2e2619;/* rail gradient endpoint */
  --ob-ink:#26201a;        /* body + heading text */
  --ob-clay:#be5f38;       /* accent — stepper + small details ONLY */
  --ob-taupe:#766b5b;      /* secondary text (eyebrow, pane help) */
  --ob-hairline:#e5decf;   /* warm hairline */
  --ob-rail-text:#ece4d3;  /* text on the dark rail */
  --ob-rail-muted:#a2967f; /* muted text on the dark rail */
}

/* ── tokens/base.css ── */
/* Minimal element defaults so specimen cards and static mocks inherit the product's look. */
html,body{height:100%}
body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-sans);font-size:var(--text-sm);line-height:var(--leading-sm);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
*{box-sizing:border-box}
a{color:var(--primary);text-decoration:underline;text-underline-offset:4px}
a:hover{color:var(--brand-burnt-orange)}
h1,h2,h3,h4{margin:0}
h1{font-family:var(--font-serif);font-size:var(--text-screen-title);font-weight:var(--weight-semibold);line-height:var(--leading-tight)}
:focus-visible{outline:var(--focus-ring-width) solid var(--ring);outline-offset:var(--focus-ring-offset)}
@keyframes lf-spin{to{transform:rotate(360deg)}}
@keyframes lf-pulse{0%,100%{opacity:1}50%{opacity:.5}}