/* ============================================================
   KCompounds · design tokens · v4 (2026-09-13; renamed from pepfolk, v3 of 2026-09-05)
   Pep acts · deep speaks · the bead marks · the record is permanent
   Soft on a square grid (13 Sep 2026): radius by size, 3 / 6 / 10, lines stay square.
   Liquid glass for what floats and what you press; no drop shadows. Space does the separating.
   Palette nudged from Flex's structure: one bright accent, one deep
   text green, a warm off-white ground, two mint-grey complements,
   one mid green. Light-first; the .dark theme is deferred.
   shadcn / Tailwind v4 · @theme inline.
   ============================================================ */

:root {
  /* brand */
  --pep: #C3FF75;        /* acts: primary buttons, live markers, the bead on deep, selection */
  --deep: #182E1A;       /* all text, dark bands, the footer */
  --ground: #FFFFFF;     /* the page · pure white since 1 Oct 2026 (sir: "the white is a lot cleaner"); was #F8F9F6, and white was the elevated surface alone */
  --wash: #F3F3F3;       /* section backgrounds, hover rows, the pass wash · plain grey since 26 Oct 2026 (sir: the "greyed-out green" goes everywhere, admin, vendor dashboard, site); was #ECF3E3 */
  --mint: #E6E6E6;       /* secondary surfaces, sparingly · plain grey since 26 Oct 2026; was #D8E5DF */
  --opal: #BDBDBD;       /* the previous period's line, illustration fills · plain grey since 26 Oct 2026; was #9CC5BB */
  --leaf: #4E9447;       /* the bead on light, illustration fills, the one mid tone */

  /* surfaces (shadcn) */
  --background: var(--ground);
  --foreground: var(--deep);
  --card: #FFFFFF;
  --card-foreground: var(--deep);
  --popover: #FFFFFF;
  --popover-foreground: var(--deep);

  --primary: var(--pep);
  --primary-foreground: var(--deep);      /* text on pep is always deep */
  --secondary: var(--wash);
  --secondary-foreground: var(--deep);
  --muted: var(--wash);
  --muted-foreground: #606F60;            /* secondary copy · 5.1:1 on ground */
  --accent: var(--mint);
  --accent-foreground: var(--deep);

  /* verdicts · pep is never a verdict */
  --pass: #2F6B2A;                        /* 5.7:1 on the wash */
  --pass-wash: var(--wash);
  --fail: #B91C1C;                        /* small text, chips, the fail flag bar */
  --fail-wash: #FEF2F2;                   /* failed rows wash · rows are never removed */
  --warn: #8A6116;
  --warn-wash: #FBF6E3;
  --destructive: #B91C1C;
  --destructive-foreground: #FFFFFF;

  /* lines & focus */
  --border: #D9DDD7;                      /* hairlines · deep at 14% over ground */
  --input: #D9DDD7;
  --ring: var(--leaf);

  /* on deep */
  --on-deep: #FFFFFF;
  --on-deep-muted: rgba(255, 255, 255, 0.62);
  --line-on-deep: rgba(255, 255, 255, 0.14);

  /* charts · CRAFT.md §7. One series is drawn in deep. Two or three series use the
     validated chart theme in fixed order, never cycled: leaf, iris, teal. Four or
     more become small multiples. Pep marks one highlighted point with a deep ring,
     never a line. Status colours are never series colours. */
  --chart-subject: var(--deep);
  --chart-1: #4E9447;
  --chart-2: #A05AE8;
  --chart-3: #1590AA;
  --chart-grid: #D9DDD7;
  --chart-axis: #606F60;
  --chart-highlight: var(--pep);

  /* shape · soft on a square grid (13 Sep 2026, after a trial on the home page; radius 0 before).
     Lines and grid stay square: rails, section bands, cells that share a hairline, tables,
     the compound strip, the footer, images, charts. Objects standing on the grid get a
     radius by their size. Nested shapes are concentric (outer radius minus padding) or
     fall to the small step. Nothing above --radius-3 except the pill. No drop shadows. */
  --radius-1: 3px;                     /* under 24px: verdict chips, counts, file chips, checkboxes */
  --radius-2: 6px;                     /* controls 24 to 40px: inputs, icon buttons, hover boxes, row highlights, tooltips */
  --radius-3: 10px;                    /* boxes: composer, menus, panels, dialogs, toasts, cards that stand alone */
  --radius: var(--radius-2);           /* shadcn's default step */
  --btn-radius-rest: 50px;             /* the pill */
  --btn-radius-active: var(--radius-3);/* on hover and focus the pill tightens to the box radius; it never squares off */

  /* structure · from browserbase: the frame's rails, section lines that cross them,
     boxes inside boxes whose inner lines run out to the outer edges */
  --frame: 1200px;                     /* marketing page width; --container 1280 stays for product views */
  --inset: 32px;                       /* how far an inner box sits from its outer box */
  --tile: 48px;                        /* icon tile: mint square, 24px icon inside */
  --hl-pad: 0.14em;                    /* the headline highlight box, pep behind one phrase */
  --hl-radius: 0.14em;                 /* the marker's corner equals its padding, so it scales with the type */
  --shadow-pop: none;                                 /* still no drop shadows: a floating layer is glass with a hairline and its rim */

  /* material · liquid glass (13 Sep 2026; after @samasante/liquid-glass, MIT, rebuilt natively in the site).
     ONE material, for what FLOATS over the page and what you PRESS: the bar, the drawer, menus, the
     prompt bar and its menus, tooltips, buttons, chip buttons, segmented controls. Never the grid:
     rails, cells, tables, boxes and bands on the page, the footer and text stay flat, or nothing would
     tell an object from the page. Frost + tint + rim. The rim is an inset light, never a drop shadow.
     Chromium also bends the backdrop at the rim (the site draws an SVG displacement map per element);
     Safari and Firefox keep frost, tint and rim. No backdrop-filter, reduced transparency or forced
     colours: the same shapes in the flat colours, no rim. Backdrop root: an element with a backdrop-filter
     is a backdrop root, so nothing inside it can blur the page; a container with floating children (the
     bar, the prompt bar) frosts a pseudo-element at z-index -1 and carries no filter itself. These are law. */
  --glass-blur: 48px;                                 /* panels, menus, the drawer, the prompt bar. 36 until 14 Sep 2026, when the bend was found to be undoing it (site.css, "the bend"); once the blur really landed, 36 still left a ghost of the headline behind a menu, so the frost went to 56 where shapes survive and letterforms do not, then the same day back to 48 at the user's ask ("tone it down just a little") */
  --glass-blur-bar: 52px;                             /* the top bar: content scrolls right under it, so it frosts harder than a panel */
  --glass-blur-sm: 18px;                              /* buttons, chips, the segmented control, the tooltip: small objects, but the same material, so the page still dissolves under them */
  --glass-sat: 1.5;
  --glass-white: rgba(255, 255, 255, .64);            /* panels, the prompt bar, ghost buttons, chips. .58 until 14 Sep 2026: with a working blur the tint carries the last of the legibility, and .70 was the step where a 40px price behind a menu is a smear of colour, not a number; .64 (the user, same day: "tone it down just a little") lets a little more of the page glow through with the letterforms still gone. A brightness lift in the filter chain reached the same place; the tint does it with nothing added */
  --glass-ground: rgba(248, 249, 246, .80);           /* the bar and the drawer: the page's own colour, frosted */
  --glass-deep: rgba(24, 46, 26, .82);                /* tooltips, the send, hover fills */
  --glass-deep-hover: rgba(35, 61, 37, .86);
  --glass-pep: rgba(195, 255, 117, .84);              /* the one filled action */
  --glass-pep-hover: rgba(182, 242, 98, .9);
  --glass-pep-active: rgba(169, 229, 85, .94);
  --glass-mint: rgba(216, 229, 223, .78);             /* a disabled send */
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(24, 46, 26, .05);   /* top light, bright lip, faint foot */
  --glass-rim-deep: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .18);
  --glass-rim-pep: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(255, 255, 255, .32), inset 0 -1px 0 rgba(24, 46, 26, .1);

  /* spacing · 4px base · every distance on a page is one of these */
  --space-1: 4px;      /* icon to label, hairline gaps */
  --space-2: 8px;      /* inside chips, icon to text in a button */
  --space-3: 12px;     /* vertical padding of inputs and buttons */
  --space-4: 16px;     /* between related items, small card padding, the gutter */
  --space-5: 24px;     /* card padding, heading to its paragraph */
  --space-6: 32px;     /* between groups inside a section */
  --space-7: 48px;     /* between subsections */
  --space-8: 64px;     /* above a section heading, nav height */
  --space-9: 96px;     /* between sections, product */
  --space-10: 128px;   /* between sections, marketing */
  --space-11: 160px;   /* above and below a hero */

  /* fixed dimensions */
  --nav-h: 64px;
  --btn-h: 44px;       /* padding 0 20 */
  --btn-h-sm: 36px;    /* padding 0 14 */
  --input-h: 44px;     /* padding 0 14 */
  --chip-h: 24px;      /* padding 0 8 */
  --row-h: 48px;       /* 44 in dense views */
  --measure: 640px;    /* prose never wider */
  --card-pad: 24px;    /* 32 on marketing pages */

  /* type · ONE face since 26 Oct 2026 (KC-0088, sir): Cal Sans v2.011, the cal.com variable font (fonts/calsans-vf.woff2, SIL OFL),
     weights 400 to 700, optical size 8 to 45 chosen by the browser. Uxum Grotesque (Sep to Oct 2026) and JetBrains Mono (gone 24 Oct) are history.
     --font-cal  Cal Sans 400/500/700 · headings 500 · h1/h2 hold "opsz" 24 (the poster drawing at 45 sets letters touching) */
  --font-cal: "Cal Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-uxum: var(--font-cal);    /* the old name, kept so nothing breaks; write --font-cal */
  --tracking-display: 0;          /* Cal Sans spaces itself: no negative tracking at any size (sir: "letters so close ... the C nearly touching the a") */
  --tracking-heading: 0;
  --tracking-body: 0;
  --tracking-label: 0.08em;       /* uppercase labels */
  --input-font-size: 16px;        /* always 16: iOS zooms anything smaller */

  /* layout · 12 columns, 16 gutter, 40 margin; 32 margin under 1024, 20 under 760 */
  --page-margin: 40px;
  --page-margin-tablet: 32px;
  --page-margin-mobile: 20px;
  --gutter: 16px;
  --container: 1280px;

  /* leading · every line height lands on the 4px grid */
  --lh-display-xl: 88px;  /* 88 */
  --lh-display: 68px;     /* 64 */
  --lh-h1: 48px;          /* 44 */
  --lh-h2: 36px;          /* 30 */
  --lh-h3: 28px;          /* 24 */
  --lh-lead: 28px;        /* 20 */
  --lh-body-lg: 28px;     /* 17 */
  --lh-body: 24px;        /* 15 */
  --lh-small: 20px;       /* 13 */
  --lh-label: 16px;       /* 11 mono */

  /* motion · strong custom curves, never the CSS keywords, never ease-in on UI */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);          /* ease-out · enters, hovers, presses, exits */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* on-screen movement between two places */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* drawers and sheets */
  --dur-press: 160ms;
  --dur-tooltip: 125ms;
  --dur-menu: 180ms;
  --dur-dialog: 240ms;
  --dur-page: 240ms;
  --press-scale: 0.97;
  --stagger: 40ms;                                 /* never above 50 */

  /* focus and selection · brand surfaces */
  --focus-ring: 2px solid var(--leaf);             /* 3.5:1 on ground, 3.9:1 on deep, offset 2px, square */
  --focus-offset: 2px;
  --selection-bg: var(--pep);
  --selection-fg: var(--deep);

  /* icons and images */
  --icon-size: 24px;
  --icon-stroke: 1.75px;                           /* 2px beside bold labels */
  --image-outline: 1px solid rgba(0, 0, 0, 0.1);   /* inset, pure black at 10%, never tinted */

  /* hit areas */
  --hit-min: 24px;                                 /* WCAG AA floor */
  --hit-desktop: 40px;
  --hit-touch: 44px;

  /* layers · the only z-indexes in the codebase */
  --z-nav: 10;
  --z-popover: 20;
  --z-dialog: 30;
  --z-toast: 40;
  --z-tooltip: 50;

  /* semantic roles · components reference these, never the brand names directly */
  --color-bg-page: var(--ground);
  --color-bg-surface: var(--wash);
  --color-bg-surface-hover: var(--mint);
  --color-bg-elevated: #FFFFFF;
  --color-bg-inverse: var(--deep);
  --color-text-primary: var(--deep);
  --color-text-secondary: #606F60;                 /* 5.0:1 on ground, 4.7:1 on wash. Never on mint (4.1:1). */
  --color-text-on-accent: var(--deep);
  --color-text-on-inverse: #FFFFFF;
  --color-text-on-inverse-secondary: rgba(255, 255, 255, 0.62);
  --color-label: #606F60;                          /* mono labels. Never lighter: 45% deep measures 2.6:1 */
  --color-border: #D9DDD7;
  --color-border-inverse: rgba(255, 255, 255, 0.14);
  --color-accent-solid: var(--pep);
  --color-accent-solid-hover: #B6F262;
  --color-accent-solid-active: #A9E555;
  --color-accent-mark: var(--leaf);                /* the full stop on light; never text */
  --color-accent-mark-inverse: var(--pep);
  --color-status-pass: #2F6B2A;
  --color-status-pass-bg: var(--wash);
  --color-status-fail: #B91C1C;
  --color-status-fail-bg: #FEF2F2;
  --color-status-warn: #8A6116;
  --color-status-warn-bg: #FBF6E3;
  --color-dim: rgba(24, 46, 26, 0.4);              /* dialog scrim */

  /* sidebar (shadcn parity) */
  --sidebar: #FFFFFF;
  --sidebar-foreground: var(--deep);
  --sidebar-primary: var(--pep);
  --sidebar-primary-foreground: var(--deep);
  --sidebar-accent: var(--wash);
  --sidebar-accent-foreground: var(--deep);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--leaf);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-subject: var(--chart-subject);
  --color-chart-grid: var(--chart-grid);
  --color-chart-highlight: var(--chart-highlight);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --color-pep: var(--pep);
  --color-deep: var(--deep);
  --color-ground: var(--ground);
  --color-wash: var(--wash);
  --color-mint: var(--mint);
  --color-opal: var(--opal);
  --color-leaf: var(--leaf);
  --color-on-deep: var(--on-deep);
  --color-on-deep-muted: var(--on-deep-muted);
  --color-line-on-deep: var(--line-on-deep);
  --color-pass: var(--pass);
  --color-pass-wash: var(--pass-wash);
  --color-fail: var(--fail);
  --color-fail-wash: var(--fail-wash);
  --color-warn: var(--warn);
  --color-warn-wash: var(--warn-wash);

  --radius-xs: var(--radius-1);
  --radius-sm: var(--radius-1);
  --radius-md: var(--radius-2);
  --radius-lg: var(--radius-3);
  --radius-xl: var(--radius-3);
  --radius-2xl: var(--radius-3);
  --radius-3xl: var(--radius-3);    /* every step above lg clamps at 10: nothing but the pill goes further */
  --radius-full: 50px;              /* the pill */

  --spacing-1: var(--space-1);
  --spacing-2: var(--space-2);
  --spacing-3: var(--space-3);
  --spacing-4: var(--space-4);
  --spacing-5: var(--space-5);
  --spacing-6: var(--space-6);
  --spacing-7: var(--space-7);
  --spacing-8: var(--space-8);
  --spacing-9: var(--space-9);
  --spacing-10: var(--space-10);
  --spacing-11: var(--space-11);

  --font-sans: var(--font-cal);
  --font-mono: var(--font-mono);
}