/* Hub design tokens. The only file with raw colours, sizes and timings: every other style uses these
   variables (tests/test_tokens.py checks it). Change a value here and the whole Hub follows.
   Component sheet with every token and component in every state: /design */

/* ---------- fonts (self-hosted, OFL) ---------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- colour by role (light) ---------- */
  --bg: #EEF1EF;              /* page background: cool mineral paper */
  --surface: #FAFBFA;         /* rail, cards, sheets */
  --field: #FFFFFF;           /* inputs, image mats, plan cards */
  --text: #1C2629;            /* slate ink */
  --text-muted: #53625F;      /* secondary text, ≥ 5.5:1 on --bg */
  --text-faint: #66746F;      /* hints and decoration, ≥ 4.5:1 on --bg */
  --border: #CDD5D3;
  --border-soft: #DFE5E3;
  --accent: #0C6E8A;          /* prepress cyan: the action colour */
  --accent-hover: #095A71;
  --accent-soft: #DCEDF1;
  --accent-ring: rgba(12, 110, 138, .2);
  --on-accent: #FFFFFF;       /* text on accent, ok, danger and ink fills */
  --on-brand: #FFFFFF;        /* text on a client's own brand colour (same in dark mode) */
  --white: #FFFFFF;           /* always white, also in dark mode: "logo on white" checks, printed paper */
  --photo-label: rgba(0, 0, 0, .6);    /* small label on a photo */
  --ok: #2D7A50;
  --ok-soft: #DDEFE4;
  --ok-line: #B9DCC6;
  --ok-text: #1F5A3A;
  --warn: #9A620F;
  --warn-soft: #F6EAD4;
  --warn-text: #6E4608;
  --danger: #B03A2E;
  --danger-soft: #F6DEDA;
  --danger-line: #E5B8B1;
  --danger-text: #8A2B22;
  --swatch-edge: rgba(0, 0, 0, .12);   /* thin edge so white colour swatches stay visible */
  --scrim: rgba(28, 38, 41, .35);      /* behind dialogs */
  --checker: #EEEEEE;                  /* transparent-logo check pattern */
  --placeholder-a: #6D7B80;            /* photo placeholder in the onboarding preview */
  --placeholder-b: #2A3236;

  /* ---------- type: six sizes, each with its line height and tracking ---------- */
  --font: "Archivo", system-ui, sans-serif;
  --text-xs: 12px;    --lh-xs: 1.4;    --ls-xs: .01em;     /* labels, badges, table heads */
  --text-sm: 13.5px;  --lh-sm: 1.45;   --ls-sm: 0;         /* secondary text, small buttons */
  --text-md: 15px;    --lh-md: 1.5;    --ls-md: 0;         /* body */
  --text-lg: 19px;    --lh-lg: 1.3;    --ls-lg: -.005em;   /* card titles, h2 in cards */
  --text-xl: 24px;    --lh-xl: 1.2;    --ls-xl: -.01em;    /* section headlines, KPI figures */
  --text-2xl: 34px;   --lh-2xl: 1.1;   --ls-2xl: -.02em;   /* page titles */
  --weight-regular: 400;
  --weight-medium: 550;
  --weight-semibold: 650;
  --weight-bold: 720;

  /* ---------- spacing: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64, nothing in between ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---------- shape, depth, motion ---------- */
  --radius-sm: 4px;      /* chips' corners, small marks */
  --radius: 6px;         /* buttons, inputs */
  --radius-card: 10px;   /* cards, dialogs */
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(28, 38, 41, .05), 0 1px 1px rgba(28, 38, 41, .03);   /* resting card */
  --shadow-2: 0 8px 24px rgba(28, 38, 41, .12);                                  /* menus */
  --shadow-3: 0 20px 50px rgba(28, 38, 41, .25);                                 /* dialogs */
  --fast: 120ms;
  --base: 200ms;
  --slow: 400ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---------- icon masks for CSS-only marks (Lucide, coloured with currentColor) ---------- */
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  /* ---------- layout ---------- */
  --rail: 216px;
  --gap: var(--space-5);
  color-scheme: light;
}

/* Dark values for every colour role. Switched on with <html data-theme="dark"> (component sheet has a toggle). */
:root[data-theme="dark"] {
  --bg: #141A1C;
  --surface: #1B2326;
  --field: #212A2D;
  --text: #E7ECEA;
  --text-muted: #A9B5B2;
  --text-faint: #8C9A97;
  --border: #33403F;
  --border-soft: #2A3533;
  --accent: #4FB3CF;
  --accent-hover: #7CCAE0;
  --accent-soft: #173640;
  --accent-ring: rgba(79, 179, 207, .3);
  --on-accent: #0E1416;
  --ok: #5FBF8A;
  --ok-soft: #173426;
  --ok-line: #2C5A41;
  --ok-text: #A6E0BF;
  --warn: #E0A94F;
  --warn-soft: #3A2C14;
  --warn-text: #F1CF94;
  --danger: #EE7E70;
  --danger-soft: #3D1E1A;
  --danger-line: #6E3129;
  --danger-text: #F6B4AA;
  --swatch-edge: rgba(255, 255, 255, .16);
  --scrim: rgba(0, 0, 0, .55);
  --checker: #2A3335;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-3: 0 20px 50px rgba(0, 0, 0, .6);
  color-scheme: dark;
}