/* ==========================================================================
   Pitch Studio admin — design tokens
   The single source for colour, type, spacing, radius, shadow and motion.
   admin.css and builder.css use only these variables; no raw colours or
   sizes elsewhere. When the app is built, this file becomes its theme
   (see docs/adr/0018-admin-design-tokens.md). Reference: design/STATES.md.

   Not covered here: the client proposal page. It themes itself from each
   proposal's brand kit (design/client-proposal/, ADR 0008).
   ========================================================================== */
:root {
  /* ---- Colour: brand ---------------------------------------------------- */
  --noir: #0b0b0a;          /* primary dark: dark buttons, selected rows, KPI tile */
  --noir-2: #121210;        /* sidebar */
  --noir-3: #26241f;        /* hover on dark */
  --gold: #c9a24f;          /* primary action, active marker, progress */
  --gold-ink: #8a6a22;      /* gold text and icons on light backgrounds */
  --gold-deep: #5e4714;     /* text on --gold-soft */
  --gold-soft: #f4ead3;     /* selected / highlight background */
  --gold-line: #e2d3ad;     /* border around gold-soft areas */
  --gold-hover: #d4af5e;    /* hover on gold buttons */
  --gold-tint: rgba(201, 162, 79, .14); /* active nav item on dark */

  /* ---- Colour: surfaces (light to dark) ---------------------------------- */
  --surface: #ffffff;       /* inputs, option cards, rows inside cards */
  --card: #fffdf8;          /* cards and panels */
  --sunken: #faf7f0;        /* hover rows, table headers, footers */
  --cream: #f6f3ec;         /* page background */
  --well: #f1ece2;          /* segmented controls, neutral pills, bar tracks */
  --glass: rgba(246, 243, 236, .92); /* sticky toolbar over scrolling content */
  --art: #3b4d3f;           /* fallback colour for photo placeholders (cards set --g) */

  /* ---- Colour: lines ----------------------------------------------------- */
  --line: #e4dfd3;          /* card and input borders */
  --line-soft: #efeadf;     /* dividers inside cards */
  --line-strong: #d8cfbb;   /* hover borders, dashed "add" boxes */

  /* ---- Colour: text ------------------------------------------------------ */
  --ink: #17160f;           /* body text */
  --ink-2: #4a463d;         /* secondary strong text, neutral pill text */
  --muted: #6d695f;         /* captions, labels, placeholders */
  --faint: #b7b09f;         /* separators, disabled icons */

  /* ---- Colour: on dark (sidebar, noir surfaces) -------------------------- */
  --on-dark: #efe9dc;
  --on-dark-muted: #cfc6b0;
  --on-dark-faint: #857f72;

  /* ---- Colour: status ---------------------------------------------------- */
  --ok: #3f8f5a;      --ok-soft: #e3f1e6;       /* picked, saved, fits budget */
  --warn: #b7791f;    --warn-soft: #fbefd9;     /* open, over budget, not opened */
  --info: #3d6f9e;    --info-soft: #e2ecf5;     /* client picking, live */
  --danger: #a33a2a;  --danger-soft: #f8e3df;   /* errors, delete */

  /* ---- Colour: third-party marks (source dots only) ---------------------- */
  --src-spotify: #1db954;
  --src-apple: #fa2d48;
  --src-youtube: #ff0033;

  /* ---- Type -------------------------------------------------------------- */
  --font-head: "Big Shoulders Display", "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;

  /* Body scale (Barlow) */
  --fs-11: 11px;   /* caps labels, eyebrows, table headers (with letter-spacing) */
  --fs-12: 12px;   /* pills, meta under names, helper text */
  --fs-13: 13px;   /* secondary text, small buttons, crumbs */
  --fs-14: 14px;   /* default UI text: tables, inputs, buttons */
  --fs-15: 15px;   /* body copy, card names */
  --fs-16: 16px;   /* emphasis: totals, empty-state titles */
  /* Display scale (Big Shoulders, uppercase) */
  --fs-22: 22px;   /* card and modal titles */
  --fs-26: 26px;   /* section headings: editor, stop blocks */
  --fs-34: 34px;   /* page titles */
  --fs-40: 40px;   /* KPI numbers */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  --lh-tight: 1;
  --lh-snug: 1.25;
  --lh-body: 1.45;

  --ls-caps: .12em;        /* uppercase labels */
  --ls-caps-wide: .16em;   /* sidebar section labels, eyebrows on dark */

  /* ---- Spacing (named by pixels) ----------------------------------------- */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-64: 64px;

  /* ---- Sizes ------------------------------------------------------------- */
  --control-sm: 30px;      /* small buttons, icon buttons in rows */
  --control: 38px;         /* inputs, buttons, toolbar */
  --control-lg: 46px;      /* search-and-add bar */
  --icon-sm: 14px;
  --icon: 16px;
  --icon-lg: 18px;
  --sidebar-w: 232px;
  --page-max: 1600px;

  /* ---- Shell: top bar, tool launcher, phone menu (shell.js, ADR 0017) ---- */
  --topbar-h: 56px;        /* dark top bar on every signed-in screen */
  --topbar-h-sm: 52px;     /* the same bar on phones */
  --logo-h: 30px;          /* F.A.M. logo in the top bar */
  --logo-h-sm: 26px;
  --avatar: 32px;          /* account button */
  --avatar-sm: 28px;       /* people in lists (settings, responses) */
  --search-w: 300px;       /* top bar search, desktop */
  --search-w-md: 220px;    /* top bar search, tablet */
  --tile-icon: 36px;       /* icon square on a launcher tile */
  --tile-icon-sm: 30px;    /* icon square in the phone menu */
  --launcher-w: 520px;     /* tool launcher panel */
  --alerts-w: 360px;       /* alerts panel */
  --account-w: 250px;      /* account menu */
  --drawer-w: 320px;       /* phone slide-in menu (never wider than 86% of the screen) */
  --dot: 8px;              /* unread dot on the alerts bell */
  --z-shell: 30;           /* top bar and sidebar sit above page content */
  --z-pop: 45;             /* launcher, alerts and account panels */
  --tabbar-h: 60px;        /* phone bottom tab bar, plus the device's safe area */
  --z-drawer: 55;          /* phone menu, above everything but dialogs and toasts */

  /* ---- Radius ------------------------------------------------------------ */
  --r-6: 6px;              /* tags, tiny chips */
  --r-8: 8px;              /* buttons, inputs, rows */
  --r-10: 10px;            /* search, toasts, banners */
  --r-12: 12px;            /* option cards, inner boxes */
  --r-16: 16px;            /* cards, panels, modals */
  --r-device: 28px;        /* phone preview frame */
  --r-pill: 999px;

  /* ---- Shadow, overlay, focus --------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(23, 22, 15, .06);
  --shadow-2: 0 6px 18px -10px rgba(23, 22, 15, .35);
  --shadow-3: 0 16px 36px -14px rgba(23, 22, 15, .35);
  --shadow-4: 0 30px 60px -20px rgba(0, 0, 0, .45);
  --scrim: rgba(18, 18, 16, .45);
  --focus-ring: 0 0 0 3px var(--gold-soft);
  --hover-on-dark: rgba(255, 255, 255, .06);
  --line-on-dark: rgba(255, 255, 255, .1);

  /* ---- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --t-fast: .12s;
  --t: .18s;

  /* ---- Breakpoints (for reference; CSS can't use variables in @media) ----
     phone   ≤ 760px   one column, sidebar becomes a top bar
     tablet  ≤ 1100px  builder preview hidden, two-column pages stack
     laptop  ≤ 1400px  builder preview tucks under the outline
     ------------------------------------------------------------------------ */
}