/* ==========================================================================
   PRTY OS — Design tokens
   Every colour, size and duration in the product comes from this file.
   Colour is semantic: a hue means the same thing on every screen.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Type */
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-10: 10px;   /* micro caps only */
  --fs-11: 11px;   /* section labels, table headers */
  --fs-12: 12px;   /* secondary text, meta */
  --fs-13: 13px;   /* body, table cells */
  --fs-14: 14px;   /* emphasised body */
  --fs-16: 16px;   /* panel titles */
  --fs-20: 20px;   /* page titles */
  --fs-24: 24px;   /* KPI values */
  --fs-32: 32px;   /* hero numbers (rare) */

  /* Grounds — graphite with a faint cool bias */
  --bg: #0C0D0F;
  --bg-2: #0F1012;
  --surface: #131417;
  --surface-2: #17191C;
  --surface-3: #1E2024;
  --surface-4: #25282D;
  --overlay: rgba(5, 6, 7, 0.62);
  --hover: rgba(255, 255, 255, 0.035);
  --press: rgba(255, 255, 255, 0.065);
  --select: rgba(138, 164, 242, 0.08);

  /* Lines */
  --line-soft: #1A1C1F;
  --line: #222428;
  --line-strong: #2F3237;

  /* Text */
  --text: #E7E8EA;
  --text-2: #A3A7AE;
  --text-3: #6E737B;
  --text-4: #4C5057;
  --inverse: #E7E8EA;
  --on-inverse: #0C0D0F;
  --focus: #8AA4F2;

  /* Semantic hues (calm, slightly desaturated) */
  --grey: #8B9099;
  --muted: #62666E;
  --purple: #9F8BEF;
  --blue: #5B9CF0;
  --teal: #3BBFAE;
  --cyan: #52C3DC;
  --green: #5AC68A;
  --emerald: #41B99A;
  --orange: #EB8B48;
  --lilac: #C99BE6;
  --red: #E6625A;
  --amber: #E2A93F;
  /* Marketing-only hues (used solely in the marketing legend) */
  --pink: #DF7BAE;
  --lime: #B5C75B;
  --gold: #D2AE52;
  --slate: #8C98C2;

  /* Spacing — 4px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;

  /* Radius — restrained */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;

  /* Sizes */
  --h-ctl: 30px;
  --h-ctl-sm: 26px;
  --h-row: 40px;
  --h-row-dense: 34px;
  --sidebar-w: 224px;
  --topbar-h: 52px;
  --page-pad: 28px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

@media (max-width: 1100px) { :root { --page-pad: 20px; } }
@media (max-width: 720px)  { :root { --page-pad: 16px; --h-row: 44px; } }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}

/* Tone helpers: set --c, components read it.
   Doubled class raises specificity so a tone always beats a component's default --c
   (components.css and screen CSS load after this file). */
.tone-grey.tone-grey    { --c: var(--grey); }
.tone-muted.tone-muted   { --c: var(--muted); }
.tone-purple.tone-purple  { --c: var(--purple); }
.tone-blue.tone-blue    { --c: var(--blue); }
.tone-teal.tone-teal    { --c: var(--teal); }
.tone-cyan.tone-cyan    { --c: var(--cyan); }
.tone-green.tone-green   { --c: var(--green); }
.tone-emerald.tone-emerald { --c: var(--emerald); }
.tone-orange.tone-orange  { --c: var(--orange); }
.tone-lilac.tone-lilac   { --c: var(--lilac); }
.tone-red.tone-red     { --c: var(--red); }
.tone-amber.tone-amber   { --c: var(--amber); }
.tone-pink.tone-pink    { --c: var(--pink); }
.tone-lime.tone-lime    { --c: var(--lime); }
.tone-gold.tone-gold    { --c: var(--gold); }
.tone-slate.tone-slate   { --c: var(--slate); }
.tone-text.tone-text    { --c: var(--text-2); }