/*
 * Kohsta design tokens.
 *
 * A plain static file rather than a Vite entry: no layout in this app pulls a
 * built bundle, every stylesheet is a link tag, and one odd build step for one
 * file would be worse than this.
 *
 * Imported verbatim from the Kohsta Design System (claude.ai/design), which was
 * itself built by reading this repository. Nothing here is hand-tuned: change a
 * value in the design project and bring it back down, rather than editing it
 * here and letting the two drift.
 */

/* Kohsta ships no licensed font binaries. Geist, Geist Mono and Instrument Serif
   are loaded from Google Fonts; replace this with self-hosted @font-face rules
   when the production font files are available. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap");

:root{
  /* Base palette: green */
  --green-50:#f0f8f4;--green-100:#dcf0e5;--green-200:#b7e0cc;--green-300:#7bc3a5;
  --green-400:#3d9e77;--green-500:#1e8059;--green-600:#17694a;--green-700:#14543a;--green-800:#0e3a29;
  /* Base palette: graphite neutrals (very slightly cool) */
  --gray-0:#ffffff;--gray-50:#f8faf9;--gray-100:#f1f4f3;--gray-200:#e2e7e5;--gray-300:#c9d1ce;
  --gray-400:#a3aeaa;--gray-500:#7a8a85;--gray-600:#556661;--gray-700:#33403c;--gray-800:#1c2422;--gray-900:#0e1412;
  /* Base palette: amber (attention, deadlines) */
  --amber-50:#fdf6ea;--amber-100:#f7e8c9;--amber-200:#f1ddb8;--amber-500:#c77c1e;--amber-700:#8a5312;
  /* Base palette: red (overdue, destructive) */
  --red-50:#fbeeef;--red-200:#eecdd1;--red-500:#b02a37;--red-700:#84202a;
  /* Base palette: blue (informational only, never a primary action) */
  --blue-50:#eef4f9;--blue-200:#c9dced;--blue-500:#1d5f8a;--blue-700:#154864;

  /* Brand */
  --brand-primary:var(--green-600);
  --brand-primary-hover:var(--green-700);
  --brand-ink:var(--gray-900);
  /* Every venue may override one hue. Kohsta chrome never uses it. */
  --tenant-accent:var(--green-600);
  --tenant-accent-contrast:#ffffff;

  /* Text */
  --text-strong:var(--gray-900);
  --text-body:var(--gray-800);
  --text-muted:var(--gray-600);
  --text-subtle:var(--gray-500);
  --text-on-dark:#ffffff;
  --text-on-dark-muted:rgba(255,255,255,.72);
  --text-link:var(--green-600);
  --text-link-hover:var(--green-700);
  --text-on-primary:#ffffff;

  /* Surfaces */
  --surface-page:var(--gray-50);
  --surface-card:var(--gray-0);
  --surface-sunken:var(--gray-100);
  --surface-inverse:var(--gray-900);
  --surface-primary:var(--brand-primary);
  --surface-primary-soft:var(--green-50);
  --surface-hover:var(--gray-100);
  --surface-selected:var(--green-50);

  /* Borders */
  --border-subtle:var(--gray-200);
  --border-default:var(--gray-300);
  --border-strong:var(--gray-400);
  --border-focus:var(--green-500);
  --border-on-dark:rgba(255,255,255,.16);

  /* Status: surface / border / text / mark, one quartet per state */
  --status-due-surface:var(--amber-50);--status-due-border:var(--amber-200);--status-due-text:var(--amber-700);--status-due-mark:var(--amber-500);
  --status-late-surface:var(--red-50);--status-late-border:var(--red-200);--status-late-text:var(--red-700);--status-late-mark:var(--red-500);
  --status-done-surface:var(--green-50);--status-done-border:var(--green-200);--status-done-text:var(--green-700);--status-done-mark:var(--green-500);
  --status-info-surface:var(--blue-50);--status-info-border:var(--blue-200);--status-info-text:var(--blue-700);--status-info-mark:var(--blue-500);
  --status-idle-surface:var(--gray-100);--status-idle-border:var(--gray-300);--status-idle-text:var(--gray-600);--status-idle-mark:var(--gray-500);

  /* Focus ring */
  --focus-ring:0 0 0 3px rgba(30,128,89,.22);

  /* Type */
  --font-sans:"Geist","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Editorial display face. Marketing surfaces and page-opening statements only:
     never inside the product, where Geist does all the work. */
  --font-display:"Instrument Serif",Georgia,serif;

  --weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;

  /* Sizes. 16px is the floor for any guest-facing input: iOS zooms below it. */
  --text-2xs:11px;--text-xs:12px;--text-sm:13px;--text-base:14px;--text-md:15px;
  --text-lg:17px;--text-xl:20px;--text-2xl:24px;--text-3xl:30px;--text-4xl:38px;--text-5xl:48px;

  --leading-tight:1.15;--leading-snug:1.3;--leading-normal:1.5;--leading-relaxed:1.65;
  --tracking-tight:-0.02em;--tracking-normal:0;--tracking-wide:0.04em;--tracking-caps:0.09em;

  --type-display:var(--weight-semibold) var(--text-4xl)/var(--leading-tight) var(--font-sans);
  --type-h1:var(--weight-semibold) var(--text-3xl)/var(--leading-tight) var(--font-sans);
  --type-h2:var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-sans);
  --type-h3:var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-sans);
  --type-body:var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-sans);
  --type-body-sm:var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-sans);
  --type-label:var(--weight-medium) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --type-caption:var(--weight-regular) var(--text-xs)/var(--leading-normal) var(--font-sans);
  --type-code:var(--weight-medium) var(--text-base)/var(--leading-normal) var(--font-mono);
  /* Marketing display roles. Fluid, so one value covers phone to desktop. */
  --type-statement:var(--weight-regular) clamp(40px,6.2vw,86px)/1.02 var(--font-display);
  --type-statement-sm:var(--weight-regular) clamp(30px,3.6vw,46px)/1.08 var(--font-display);
  --type-numeral:var(--weight-regular) clamp(34px,3.4vw,52px)/1 var(--font-display);

  /* Spacing */
  --space-0:0;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;
  --space-6:20px;--space-7:24px;--space-8:32px;--space-9:40px;--space-10:48px;--space-11:64px;--space-12:80px;

  --gutter-page:20px;      /* guest screens, phone */
  --gutter-admin:28px;     /* admin content wrapper */
  --card-padding:18px;
  --card-padding-lg:24px;
  --stack-card:14px;       /* gap between stacked cards */
  --row-padding-y:10px;    /* key/value rows and table cells */
  --control-height:40px;
  --control-height-sm:32px;
  --control-height-lg:48px;
  --tap-min:44px;          /* nothing a guest taps goes below this */
  --measure-guest:640px;   /* guide column */
  --measure-prose:68ch;
  --sidebar-width:236px;

  /* Radius */
  --radius-xs:4px;
  --radius-sm:6px;   /* base: controls, inputs, buttons */
  --radius-md:10px;  /* cards on guest screens, media thumbs */
  --radius-lg:14px;  /* full-width panels, sheets */
  --radius-xl:20px;
  --radius-pill:999px;
  --radius-circle:50%;

  /* Elevation. Depth comes from borders first, shadow second. */
  --shadow-none:none;
  --shadow-hairline:0 1px 2px rgba(14,20,18,.05);
  --shadow-card:0 1px 3px rgba(14,20,18,.06);
  --shadow-raised:0 4px 12px rgba(14,20,18,.08);
  --shadow-overlay:0 12px 32px rgba(14,20,18,.16);
  --shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.06);
  --scrim-bottom:linear-gradient(to top,rgba(248,250,249,1) 30%,rgba(248,250,249,0));
  --scrim-image:linear-gradient(to top,rgba(14,20,18,.72),rgba(14,20,18,0) 62%);

  /* Motion */
  --duration-instant:80ms;
  --duration-fast:140ms;
  --duration-normal:200ms;
  --duration-slow:320ms;
  --ease-standard:cubic-bezier(.2,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --transition-control:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);
}

@media (prefers-reduced-motion:reduce){
  :root{--duration-instant:0ms;--duration-fast:0ms;--duration-normal:0ms;--duration-slow:0ms}
}