/* The Molca design tokens, as published by the molca-ui kit (molca-web-ui-kit.vercel.app).
 *
 * The kit ships as a shadcn/Tailwind registry theme, which none of these three surfaces can install —
 * they are zero-build stylesheets. What is portable is the token layer, so that is what is copied here
 * verbatim: the same names, the same values, light set on :root and dark set on `.dark`, exactly as the
 * kit emits them. Anything a surface needs that the kit does not define is derived from a kit token
 * below rather than picked by eye, so the only place a brand colour is ever written down is this file.
 *
 * Kept in sync by hand. When the kit's foundations page changes, change the token blocks here and
 * nothing else — every surface reads through them.
 */

/* Self-hosted because the brand faces are not on any CDN. Poppins still comes from Google Fonts, which
   is what every surface's CSP already allows. */
@font-face{font-family:"Molca Bold";src:url(/shared/fonts/Molca-Bold.otf) format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Molca Medium";src:url(/shared/fonts/Molca-Medium.otf) format("opentype");font-weight:500;font-style:normal;font-display:swap}

:root{
  color-scheme:light;

  /* -- kit tokens: light ------------------------------------------------------------------- */
  --background:#fafafa;--foreground:#1d293d;
  --card:#fff;--card-foreground:#1d293d;
  --popover:#fff;--popover-foreground:#1d293d;
  --primary:#231f20;--primary-foreground:#fff;
  --secondary:#f5f5f5;--secondary-foreground:#1d293d;
  --muted:#f5f5f5;--muted-foreground:#737373;
  --accent:#e5e5e5;--accent-foreground:#1d293d;
  --destructive:#fb2c36;--destructive-foreground:#fff;
  --success:#dcfce7;--success-foreground:#00c950;
  --warning:#ffedd4;--warning-foreground:#ff6900;
  --border:#d4d4d4;--border-secondary:#e5e5e5;--border-brand:#2c2c2c;
  --input:#d4d4d4;--bg-input:#fafafa;--ring:#231f20;
  --text-secondary:#525252;--text-tertiary:#737373;--text-quaternary:#a1a1a1;
  --brand:#231f20;--brand-accent:#cfff33;
  --chart-1:#231f20;--chart-2:#16a34a;--chart-3:#f97316;--chart-4:#6366f1;--chart-5:#a1a1a1;
  --sidebar:oklch(98.5% 0 0);--sidebar-foreground:oklch(14.5% 0 0);
  --sidebar-primary:var(--primary);--sidebar-primary-foreground:var(--primary-foreground);
  --sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);
  --sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0);

  /* The kit's radius scale. The foundations page calls 12px the base and the Molca button rounded-xl,
     so that is the base here rather than shadcn's stock .625rem. */
  --radius:.75rem;

  /* Larger than base gets the Molca face, base and below gets Poppins — the kit's typography rule. */
  --font-display:"Molca Bold",Poppins,ui-sans-serif,system-ui,sans-serif;
  --font-heading:"Molca Medium",Poppins,ui-sans-serif,system-ui,sans-serif;
  --font-sans:Poppins,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;

  /* -- derived: surfaces the kit has no token for -------------------------------------------
     A panel nested inside a card needs a step away from it in whichever direction the theme runs.
     Mixing toward the foreground gives that step in both without a second hand-picked palette. */
  --surface-raised:color-mix(in oklab,var(--card) 94%,var(--foreground));
  --surface-soft:color-mix(in oklab,var(--card) 88%,var(--foreground));

  /* -- derived: the accent, tinted -----------------------------------------------------------
     `--primary` is lime in dark and near-black in light, which is the kit's intent: the lime is the
     dark theme's brand and steps back to `--brand-accent` in the light one. Everything that used to
     be a hand-mixed lime rgba() reads one of these instead. */
  --accent-hover:color-mix(in oklab,var(--primary) 86%,var(--foreground));
  --accent-soft:color-mix(in srgb,var(--primary) 10%,transparent);
  --accent-line:color-mix(in srgb,var(--primary) 28%,transparent);

  /* -- derived: status, as ink and as a tint -------------------------------------------------
     The kit's status pairs swap roles between themes — in light `--warning` is the fill and
     `--warning-foreground` the ink, in dark it is the other way round. These name the two jobs
     directly so a badge does not have to know which theme it is in.

     The three inks are darkened toward the foreground here and nowhere else. At full strength on the
     light background the kit's own status colours measure 2.9:1 (warning), 3.8:1 (destructive) and
     2.2:1 (success) — below the 4.5:1 a badge caption needs to be read. 60% of the way keeps the hue
     recognisably the kit's and puts all three past 4.5:1. The fills and the lines stay on the pure
     value, so a warning badge is still orange; only the letters on it move. */
  --danger-text:color-mix(in oklab,var(--destructive) 60%,var(--foreground));
  --danger-fill:color-mix(in srgb,var(--destructive) 10%,transparent);
  --danger-line:color-mix(in srgb,var(--destructive) 30%,transparent);
  --warning-text:color-mix(in oklab,var(--warning-foreground) 60%,var(--foreground));
  --warning-fill:color-mix(in srgb,var(--warning-foreground) 12%,transparent);
  --warning-line:color-mix(in srgb,var(--warning-foreground) 30%,transparent);
  --success-text:color-mix(in oklab,var(--success-foreground) 60%,var(--foreground));
  --success-fill:color-mix(in srgb,var(--success-foreground) 12%,transparent);
  --success-line:color-mix(in srgb,var(--success-foreground) 30%,transparent);

  --shadow:0 18px 44px color-mix(in srgb,var(--foreground) 14%,transparent);
  --shadow-strong:0 24px 60px color-mix(in srgb,var(--foreground) 22%,transparent);
  --scrim:color-mix(in srgb,var(--background) 82%,transparent);
}

/* The dark set, copied from the kit's `.dark` block. Repeated under a media query below for the visit
   that arrives before the boot script has run, or with scripting off: without it the page would flash,
   or sit in, light while both the browser and the kit say dark. `.light` opts back out explicitly. */
:root.dark,
:root[data-theme="dark"]{
  color-scheme:dark;
  --background:#010101;--foreground:#f5f5f5;
  --card:#231f20;--card-foreground:#f5f5f5;
  --popover:#231f20;--popover-foreground:#f5f5f5;
  --primary:#cfff33;--primary-foreground:#231f20;
  --secondary:#404040;--secondary-foreground:#f5f5f5;
  --muted:#404040;--muted-foreground:#a1a1a1;
  --accent:#525252;--accent-foreground:#f5f5f5;
  --destructive:#ff6467;--destructive-foreground:#fff;
  --success:#00c950;--success-foreground:#b9f8cf;
  --warning:#ff6900;--warning-foreground:#ffd6a7;
  --border:#525252;--border-secondary:#404040;--border-brand:#2c2c2c;
  --input:#525252;--bg-input:#010101;--ring:#cfff33;
  --text-secondary:#d4d4d4;--text-tertiary:#a1a1a1;--text-quaternary:#737373;
  --brand:#cfff33;--brand-accent:#cfff33;
  --chart-1:#cfff33;--chart-2:#22c55e;--chart-3:#fb923c;--chart-4:#818cf8;--chart-5:#a3a3a3;
  --sidebar:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);
  --sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);
  --sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.6% 0 0);

  /* Dark inverts which half of each status pair is the ink, and needs no darkening: on the dark card
     the kit's own status colours already measure 5.6:1 or better. These are the pure kit values. */
  --danger-text:var(--destructive);
  --warning-text:var(--warning-foreground);
  --success-text:var(--success-foreground);
  --danger-fill:color-mix(in srgb,var(--destructive) 12%,transparent);
  --warning-fill:color-mix(in srgb,var(--warning) 16%,transparent);
  --warning-line:color-mix(in srgb,var(--warning) 34%,transparent);
  --success-fill:color-mix(in srgb,var(--success) 14%,transparent);
  --success-line:color-mix(in srgb,var(--success) 34%,transparent);

  --shadow:0 18px 44px rgba(0,0,0,.42);
  --shadow-strong:0 24px 60px rgba(0,0,0,.55);
  --scrim:rgba(1,1,1,.82);
}

@media (prefers-color-scheme:dark){
  :root:not(.light):not([data-theme="light"]){
    color-scheme:dark;
    --background:#010101;--foreground:#f5f5f5;
    --card:#231f20;--card-foreground:#f5f5f5;
    --popover:#231f20;--popover-foreground:#f5f5f5;
    --primary:#cfff33;--primary-foreground:#231f20;
    --secondary:#404040;--secondary-foreground:#f5f5f5;
    --muted:#404040;--muted-foreground:#a1a1a1;
    --accent:#525252;--accent-foreground:#f5f5f5;
    --destructive:#ff6467;--destructive-foreground:#fff;
    --success:#00c950;--success-foreground:#b9f8cf;
    --warning:#ff6900;--warning-foreground:#ffd6a7;
    --border:#525252;--border-secondary:#404040;--border-brand:#2c2c2c;
    --input:#525252;--bg-input:#010101;--ring:#cfff33;
    --text-secondary:#d4d4d4;--text-tertiary:#a1a1a1;--text-quaternary:#737373;
    --brand:#cfff33;--brand-accent:#cfff33;
    --chart-1:#cfff33;--chart-2:#22c55e;--chart-3:#fb923c;--chart-4:#818cf8;--chart-5:#a3a3a3;
    --sidebar:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);
    --sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);
    --sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.6% 0 0);
    --danger-text:var(--destructive);
    --warning-text:var(--warning-foreground);
    --success-text:var(--success-foreground);
    --danger-fill:color-mix(in srgb,var(--destructive) 12%,transparent);
    --warning-fill:color-mix(in srgb,var(--warning) 16%,transparent);
    --warning-line:color-mix(in srgb,var(--warning) 34%,transparent);
    --success-fill:color-mix(in srgb,var(--success) 14%,transparent);
    --success-line:color-mix(in srgb,var(--success) 34%,transparent);
    --shadow:0 18px 44px rgba(0,0,0,.42);
    --shadow-strong:0 24px 60px rgba(0,0,0,.55);
    --scrim:rgba(1,1,1,.82);
  }
}

/* Headings pick up the Molca face automatically, which is how the kit describes it. */
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:500}

/* The toggle. One control with the same markup on all three surfaces, so it is styled once here. */
.theme-toggle{display:inline-grid;place-items:center;width:32px;height:32px;min-height:32px;padding:0;flex:none;
  border:1px solid var(--border-secondary);border-radius:8px;background:var(--card);
  color:var(--text-tertiary);cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.theme-toggle:hover{border-color:var(--border);background:var(--card);color:var(--foreground)}
.theme-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
/* Both glyphs are drawn once and the theme decides which one shows, so the button never has to be
   re-rendered to stay truthful. */
.theme-toggle .moon{display:none}
:root.dark .theme-toggle .sun,:root[data-theme="dark"] .theme-toggle .sun{display:none}
:root.dark .theme-toggle .moon,:root[data-theme="dark"] .theme-toggle .moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not(.light):not([data-theme="light"]) .theme-toggle .sun{display:none}
  :root:not(.light):not([data-theme="light"]) .theme-toggle .moon{display:block}
}