/* SAASYA MEN COCKPIT v2 · design tokens · Picasso · 14 Oct 2026
   v2.1 (14 Oct, evening): type scale -2px on every step, compact density, 4 themes.
   Themes switch by [data-theme] on <html>: dark (default, on :root) · light · ivory · midnight.
   A theme is tokens only. Components never test [data-theme]; they read the variables.
   Every colour pair below was checked for WCAG contrast (see CONTRACT.txt).
   Rule: components use these variables only. No raw hex in kit.css or web/. */

@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* surfaces, back to front */
  --bg: #0b0b0c;            /* page */
  --bg-side: #0f0f11;       /* sidebar */
  --card: #161618;          /* cards, columns' cards, dashboard cards */
  --card-2: #1d1d20;        /* hover, inset panel, input fill */
  --raised: #1c1c1f;        /* modal, toast, menus */
  --col: #111113;           /* board column well */
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --hover: rgba(255, 255, 255, .05);
  --press: rgba(255, 255, 255, .08);
  --scrim: rgba(0, 0, 0, .62);

  /* text */
  --ink: #f4f4f5;           /* 16.4:1 on card */
  --ink-2: #a1a1aa;         /* 7.0:1  secondary */
  --ink-3: #8e8e97;         /* 5.2:1  faint, labels; never below this */
  --ink-inv: #0b0b0c;

  /* the signature: Saasya gold. Logo, primary button, active nav, focus ring. Nothing else. */
  --gold: #a9835a;          /* brand gold, fills and rules */
  --gold-ink: #cba97c;      /* gold as words or icons, 8.2:1 on card */
  --gold-fill: #cba97c;     /* primary button fill */
  --on-gold: #16110a;       /* text on gold, 8.5:1 */
  --gold-tint: rgba(203, 169, 124, .14);
  --ring: #cba97c;

  /* reference accents: money tiles, chips, charts, stage rings */
  --green: #3fbf7f;  --green-ink: #4fd18f;  --green-tint: rgba(63, 191, 127, .16);  --green-dim: #1d5a3c;
  --blue: #4c6bff;   --blue-ink: #8fa2ff;   --blue-tint: rgba(76, 107, 255, .16);   --blue-dim: #26306b;
  --red: #e5484d;    --red-ink: #ff7a7e;    --red-tint: rgba(229, 72, 77, .16);     --red-dim: #5e2427;
  --purple: #a24bf0; --purple-ink: #c58bff; --purple-tint: rgba(162, 75, 240, .16); --purple-dim: #47256a;
  --orange: #f08c2e; --orange-ink: #ffa55c; --orange-tint: rgba(240, 140, 46, .16); --orange-dim: #5e3a16;
  --grey: #8e8e97;   --grey-ink: #a1a1aa;   --grey-tint: rgba(255, 255, 255, .08);

  --chart-track: rgba(255, 255, 255, .07);
  --chart-grid: rgba(255, 255, 255, .09);

  --shadow-1: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 28px -12px rgba(0, 0, 0, .7);
  --shadow-3: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 60px -16px rgba(0, 0, 0, .8);

  /* per-theme component hooks (so kit.css never checks the theme name) */
  --field-bg: var(--card-2);  --field-line: var(--line);  --seg-pill: var(--raised);  --ts-x: 0px;
}

[data-theme="light"] {
  color-scheme: light;

  --bg: #ffffff;
  --bg-side: #fafafa;
  --card: #ffffff;
  --card-2: #f6f6f7;
  --raised: #ffffff;
  --col: #fafafa;
  --line: #ebebee;
  --line-2: #dcdce0;
  --hover: rgba(23, 23, 26, .04);
  --press: rgba(23, 23, 26, .07);
  --scrim: rgba(15, 15, 18, .42);

  --ink: #17171a;           /* 16.6:1 */
  --ink-2: #5f5f68;         /* 5.9:1 */
  --ink-3: #696972;         /* 4.65:1 at worst (hovered row on the grey inset) */
  --ink-inv: #ffffff;

  --gold: #a9835a;
  --gold-ink: #7a5e41;      /* same hue, darker: 5.5:1 for words on white */
  --gold-fill: #a9835a;
  --on-gold: #16110a;       /* 5.4:1 */
  --gold-tint: rgba(169, 131, 90, .12);
  --ring: #a9835a;          /* 3.5:1 against white, meets the 3:1 rule for focus */

  --green: #1f9d61;  --green-ink: #127046;  --green-tint: rgba(31, 157, 97, .10);  --green-dim: #bfe6d1;
  --blue: #2f4fe0;   --blue-ink: #2f4fe0;   --blue-tint: rgba(47, 79, 224, .09);   --blue-dim: #cdd6fb;
  --red: #e5484d;    --red-ink: #b92a34;    --red-tint: rgba(229, 72, 77, .10);    --red-dim: #f6caca;
  --purple: #9b45e8; --purple-ink: #7f32c9; --purple-tint: rgba(155, 69, 232, .10); --purple-dim: #e2cdf8;
  --orange: #e07a1f; --orange-ink: #9e4d0a; --orange-tint: rgba(224, 122, 31, .11); --orange-dim: #f7dbbf;
  --grey: #8e8e97;   --grey-ink: #5f5f68;   --grey-tint: rgba(23, 23, 26, .06);

  --chart-track: rgba(23, 23, 26, .06);
  --chart-grid: rgba(23, 23, 26, .10);

  --shadow-1: 0 1px 2px rgba(16, 16, 20, .04);
  --shadow-2: 0 1px 2px rgba(16, 16, 20, .04), 0 12px 28px -12px rgba(16, 16, 20, .16);
  --shadow-3: 0 2px 6px rgba(16, 16, 20, .06), 0 28px 64px -20px rgba(16, 16, 20, .28);

  --field-bg: var(--card);  --field-line: var(--line-2);  --seg-pill: var(--card);  --ts-x: 12px;
}

/* IVORY: warm cream surfaces, deeper gold. The showroom feel. Checked on the worst surface (hovered inset). */
[data-theme="ivory"] {
  color-scheme: light;

  --bg: #f5f0e6;
  --bg-side: #efe8da;
  --card: #fbf8f1;
  --card-2: #efe8da;
  --raised: #fffdf8;
  --col: #efe8da;
  --line: #e2d9c7;
  --line-2: #d3c7b1;
  --hover: rgba(31, 26, 18, .05);
  --press: rgba(31, 26, 18, .08);
  --scrim: rgba(31, 24, 14, .42);

  --ink: #1f1a12;           /* 16.3:1 on card */
  --ink-2: #5a5042;         /* 7.4:1, 5.8 worst */
  --ink-3: #685e4f;         /* 6.0:1, 4.7 worst */
  --ink-inv: #fbf8f1;

  --gold: #8a6a45;          /* deeper than brand gold so it holds on cream */
  --gold-ink: #6c5233;      /* 6.9:1 on card */
  --gold-fill: #8a6a45;
  --on-gold: #fffaf0;       /* 4.8:1 */
  --gold-tint: rgba(138, 106, 69, .14);
  --ring: #8a6a45;          /* 4.4:1 against the page */

  --green: #1f9d61;  --green-ink: #127046;  --green-tint: rgba(31, 157, 97, .12);  --green-dim: #bfe0c8;
  --blue: #2f4fe0;   --blue-ink: #2f4fe0;   --blue-tint: rgba(47, 79, 224, .10);   --blue-dim: #cdd3ef;
  --red: #e5484d;    --red-ink: #b92a34;    --red-tint: rgba(229, 72, 77, .11);    --red-dim: #f0c9c2;
  --purple: #9b45e8; --purple-ink: #7f32c9; --purple-tint: rgba(155, 69, 232, .11); --purple-dim: #e0cfee;
  --orange: #e07a1f; --orange-ink: #8f4507; --orange-tint: rgba(224, 122, 31, .13); --orange-dim: #f1d5b4;
  --grey: #8f8473;   --grey-ink: #5a5042;   --grey-tint: rgba(31, 26, 18, .07);

  --chart-track: rgba(31, 26, 18, .07);
  --chart-grid: rgba(31, 26, 18, .10);

  --shadow-1: 0 1px 2px rgba(60, 44, 20, .06);
  --shadow-2: 0 1px 2px rgba(60, 44, 20, .06), 0 12px 28px -12px rgba(60, 44, 20, .18);
  --shadow-3: 0 2px 6px rgba(60, 44, 20, .08), 0 28px 64px -20px rgba(60, 44, 20, .30);

  --field-bg: var(--card);  --field-line: var(--line-2);  --seg-pill: var(--card);  --ts-x: 12px;
}

/* MIDNIGHT: deep navy-charcoal surfaces, the same gold signature as Dark. */
[data-theme="midnight"] {
  color-scheme: dark;

  --bg: #0a0e16;
  --bg-side: #0d121c;
  --card: #121826;
  --card-2: #192131;
  --raised: #182030;
  --col: #0f1520;
  --line: rgba(160, 180, 220, .10);
  --line-2: rgba(160, 180, 220, .17);
  --hover: rgba(200, 215, 255, .05);
  --press: rgba(200, 215, 255, .08);
  --scrim: rgba(3, 6, 12, .66);

  --ink: #eef1f7;           /* 15.7:1 on card */
  --ink-2: #a4adbd;         /* 7.8:1 */
  --ink-3: #8d97a9;         /* 6.0:1, 4.8 worst */
  --ink-inv: #0a0e16;

  --gold: #a9835a;
  --gold-ink: #cba97c;      /* 8.0:1 */
  --gold-fill: #cba97c;
  --on-gold: #16110a;       /* 8.5:1 */
  --gold-tint: rgba(203, 169, 124, .14);
  --ring: #cba97c;

  --green: #3fbf7f;  --green-ink: #4fd18f;  --green-tint: rgba(63, 191, 127, .16);  --green-dim: #1b4f45;
  --blue: #4c6bff;   --blue-ink: #8fa2ff;   --blue-tint: rgba(76, 107, 255, .18);   --blue-dim: #26336e;
  --red: #e5484d;    --red-ink: #ff7a7e;    --red-tint: rgba(229, 72, 77, .16);     --red-dim: #55253a;
  --purple: #a24bf0; --purple-ink: #c58bff; --purple-tint: rgba(162, 75, 240, .18); --purple-dim: #40296e;
  --orange: #f08c2e; --orange-ink: #ffa55c; --orange-tint: rgba(240, 140, 46, .16); --orange-dim: #54391f;
  --grey: #8d97a9;   --grey-ink: #a4adbd;   --grey-tint: rgba(200, 215, 255, .08);

  --chart-track: rgba(200, 215, 255, .07);
  --chart-grid: rgba(200, 215, 255, .09);

  --shadow-1: 0 1px 0 rgba(200, 215, 255, .03) inset, 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-2: 0 1px 0 rgba(200, 215, 255, .04) inset, 0 12px 28px -12px rgba(0, 0, 0, .75);
  --shadow-3: 0 1px 0 rgba(200, 215, 255, .05) inset, 0 24px 60px -16px rgba(0, 0, 0, .85);

  --field-bg: var(--card-2);  --field-line: var(--line);  --seg-pill: var(--raised);  --ts-x: 0px;
}

:root {
  /* type: Inter 4.1 variable. Optical size is automatic, so 22px and up
     render as Inter Display (the Attio look), body renders as Inter text. */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-features: "cv11", "ss01";            /* single-storey a, open digits */
  --num: "tnum", "cv11", "ss01";               /* tabular figures for money */

  /* SCALE v2.1: every step 2px smaller than v1 (Bhargav, 14 Oct: "the letters are very huge").
     Use the role names. The --fs-NN names are the v1 step ids, kept so web/ keeps working;
     they now hold the smaller values (e.g. --fs-15 is 13px). */
  --fs-meta: 11px;      /* chart axis, avatar initials, bottom-nav words: the floor, meta only */
  --fs-label: 11px;     /* labels, chips, hints, column heads */
  --fs-small: 12px;     /* secondary, table cells, buttons, card rows */
  --fs-body: 13px;      /* BASE: nav, body, inputs, card titles */
  --fs-title: 14px;     /* page title in the top bar */
  --fs-card: 16px;      /* dashboard card title, modal title */
  --fs-section: 20px;   /* section heading, page h1 */
  --fs-fig: 26px;       /* figure */
  --fs-hero: 32px;      /* hero figure */

  --fs-12: var(--fs-meta);
  --fs-13: var(--fs-label);
  --fs-14: var(--fs-small);
  --fs-15: var(--fs-body);
  --fs-16: var(--fs-title);
  --fs-18: var(--fs-card);
  --fs-22: var(--fs-section);
  --fs-28: var(--fs-fig);
  --fs-34: var(--fs-hero);

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh: 1.5;

  --w-regular: 400;
  --w-medium: 500;
  --w-semi: 600;

  --track-body: -.006em;
  --track-head: -.018em;
  --track-fig: -.028em;
  --track-caps: .06em;

  /* space: 2px-step compact grid (v2.1, ~15% tighter than v1, Attio density) */
  --s-1: 4px;  --s-2: 6px;  --s-3: 10px; --s-4: 12px; --s-5: 16px;
  --s-6: 20px; --s-8: 24px; --s-10: 32px; --s-12: 40px; --s-16: 48px;

  /* radius */
  --r-xs: 6px;      /* small inner bits, kbd */
  --r-sm: 8px;      /* buttons, inputs, nav pill */
  --r-md: 10px;     /* board card */
  --r-lg: 14px;     /* icon tile, toast */
  --r-xl: 20px;     /* dashboard card, modal */
  --r-full: 999px;  /* chips, avatars, pill bars */

  /* sizes (compact for mouse; touch screens get --tap where it matters, see kit.css) */
  --side-w: 224px;
  --rail-w: 60px;
  --top-h: 48px;
  --col-w: 264px;
  --tap: 44px;          /* minimum touch target on touch screens, never lower */
  --h-nav: 32px;        /* sidebar item */
  --h-ctl: 30px;        /* button / input with a mouse */
  --h-ctl-sm: 26px;
  --h-row: 44px;        /* table row */
  --h-head: 30px;       /* table head, column head */
  --icon: 16px;
  --icon-sm: 14px;
  --icon-lg: 20px;
  --icon-stroke: 1.5;
  --tile: 36px;
  --tile-sm: 30px;
  --avatar: 22px;
  --avatar-lg: 30px;

  /* theme picker swatches: fixed per theme so every option shows its own colours */
  --sw-dark-bg: #0b0b0c;     --sw-dark-card: #1d1d20;     --sw-dark-gold: #cba97c;
  --sw-light-bg: #ffffff;    --sw-light-card: #ececef;    --sw-light-gold: #a9835a;
  --sw-ivory-bg: #f5f0e6;    --sw-ivory-card: #e2d9c7;    --sw-ivory-gold: #8a6a45;
  --sw-midnight-bg: #0a0e16; --sw-midnight-card: #1c2638; --sw-midnight-gold: #cba97c;

  /* motion: one language everywhere (Berry rhythm) */
  --ease-out: cubic-bezier(.22, 1, .36, 1);      /* entrances, expo-out */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);   /* sidebar, theme */
  --ease-in: cubic-bezier(.4, 0, 1, 1);          /* exits */
  --d-micro: 160ms;     /* hover, press, colour */
  --d-ui: 240ms;        /* sidebar, menus, toggles */
  --d-exit: 180ms;      /* exits run ~70% of enter */
  --d-enter: 600ms;     /* card fade-up */
  --d-chart: 900ms;     /* draw-in */
  --d-count: 1200ms;    /* count-up */
  --stagger: 50ms;      /* between siblings, capped at 12 */
  --lift: -3px;         /* hover lift distance */

  --knob: #ffffff;   /* switch knob, both themes */
  --z-sticky: 10; --z-side: 20; --z-menu: 40; --z-modal: 100; --z-toast: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-micro: 0ms; --d-ui: 0ms; --d-exit: 0ms; --d-enter: 0ms; --d-chart: 0ms; --d-count: 0ms; --stagger: 0ms; --lift: 0px; }
}