/* apply bold, the tool's design tokens (dashboard, account + admin pages, login).
   Reference page: /design-system.html (public/design-system.html). Components on these tokens: app-components.css.

   The idea: a quiet tool with a few loud moments. Neutrals carry 90 % of every screen; the marketing site's three
   hues come in only where something happens, and each one means one thing:
     blue   = you act          (primary buttons, focus, links, the selected place)
     yellow = your page is out (live pages, views, progress)
     orange = people answered  (said hello, testimonials, a booked meeting)
   At most one loud field per screen. Everything is prefixed --ds- so it can live next to styles.css / dashboard.css
   while screens move over one by one.

   Theme: theme.js sets <html data-theme="light|dark">; pages without it follow the system setting. */

:root {
  /* Ramps, the marketing site's (its colors.css, in the apply_bold_marketing repo). Use the roles below in
     components; reach for a ramp only for illustrations and the loud fields. */
  --ds-blue-50: #eef2ff;  --ds-blue-100: #d9e2ff;  --ds-blue-300: #96adff;  --ds-blue-600: #2f5bff;  --ds-blue-700: #1d47e6;  --ds-blue-800: #1a3fd1;  --ds-blue-950: #0b1a5c;
  --ds-sun-50: #fffaeb;   --ds-sun-100: #fff0b8;   --ds-sun-300: #ffe27a;   --ds-sun-600: #ffd23f;   --ds-sun-800: #8a6400;   --ds-sun-950: #332500;
  --ds-orange-50: #fff5eb; --ds-orange-100: #ffe2c2; --ds-orange-300: #ffb466; --ds-orange-600: #ff8a1f; --ds-orange-800: #a84f00; --ds-orange-950: #3d1f00;

  /* Neutrals: cool, leaning towards the blue (the marketing site's #121216 / #f2f2f5), never pure grey. */
  --ds-ground: #fafafc;      /* the page behind everything */
  --ds-surface: #ffffff;     /* cards, sheets, the sidebar */
  --ds-surface-2: #eeeef3;   /* hover, inset fields, unpicked segments */
  --ds-surface-3: #e3e3eb;   /* pressed, the track of a progress bar */
  --ds-line: #e2e2ea;        /* only in tables and form fields; cards are set off by tone, not lines */
  --ds-line-strong: #c9c9d4; /* a field's border on hover */
  --ds-ink: #121216;         /* all running text */
  --ds-ink-2: #4a4a56;       /* secondary text (8:1 on white) */
  --ds-ink-3: #6b6b78;       /* captions, placeholders, axis labels (≥ 4.5:1 on ground and surface) */
  --ds-scrim: rgb(14 15 21 / 0.4);

  /* Roles */
  --ds-action: var(--ds-blue-600);       /* fills: primary button, selected segment, checkbox */
  --ds-action-hover: var(--ds-blue-700);
  --ds-on-action: #ffffff;
  --ds-action-text: var(--ds-blue-800);  /* links and the selected nav item's icon, as text on light grounds */
  --ds-action-soft: var(--ds-blue-50);   /* the selected nav item, a picked row */
  --ds-focus: var(--ds-blue-600);

  --ds-live: var(--ds-sun-600);          /* a live page, the views tile, progress */
  --ds-on-live: var(--ds-sun-950);
  --ds-live-soft: var(--ds-sun-100);
  --ds-live-text: var(--ds-sun-800);

  --ds-people: var(--ds-orange-600);     /* hellos, testimonials, a meeting booked */
  --ds-on-people: #2b1400;
  --ds-people-soft: var(--ds-orange-100);
  --ds-people-text: var(--ds-orange-800);

  --ds-ok: #1f7a45;     --ds-ok-soft: #dcf2e4;
  --ds-warn: #8a5a00;   --ds-warn-soft: #fff1c7;
  --ds-danger: #b3261e; --ds-danger-soft: #fde4e1;

  --ds-chart: #b07d00;       /* bars and lines (validated with the dataviz palette checker; the yellow ramp's deep end) */
  --ds-chart-text: #8a6200;
  --ds-chart-grid: #ebebf0;

  /* Type: Inter does the work, Hanken Grotesk speaks (titles, big numbers), Permanent Marker only in loud moments. */
  --ds-font-ui: 'Inter', system-ui, -apple-system, sans-serif;
  --ds-font-display: 'Hanken Grotesk', 'Inter', system-ui, sans-serif;
  --ds-font-hand: 'Permanent Marker', 'Hanken Grotesk', cursive;

  /* Fixed sizes (a tool doesn't grow with the window). Use few per screen: one number, one title, body, caption. */
  --ds-text-xs: 12px;    /* captions, axis labels, counters */
  --ds-text-sm: 13px;    /* table meta, chips, menus */
  --ds-text-md: 15px;    /* body, inputs, buttons */
  --ds-text-lg: 17px;    /* section headings */
  --ds-title-sm: 22px;   /* drawer / sheet titles (display face) */
  --ds-title: 30px;      /* page titles (display face) */
  --ds-number: 40px;     /* KPI figures (display face) */
  --ds-number-xl: 64px;  /* the one hero figure per screen */
  --ds-leading-tight: 1.05;
  --ds-leading: 1.5;
  --ds-tracking-display: -0.03em;

  /* Space: a 4 px grid. Inside a card 16 / 24, between cards 16, between sections 32 / 48. */
  --ds-space-1: 4px;  --ds-space-2: 8px;  --ds-space-3: 12px; --ds-space-4: 16px;
  --ds-space-5: 24px; --ds-space-6: 32px; --ds-space-7: 48px; --ds-space-8: 64px;

  /* Corners: four steps, decided once. Buttons and chips are pills, like the marketing site. */
  --ds-r-sm: 6px;       /* tags inside a chip row, checkboxes */
  --ds-r-control: 10px; /* inputs, menu items, nav items */
  --ds-r-card: 16px;    /* cards, tiles, popovers */
  --ds-r-sheet: 24px;   /* sheets, dialogs, the loud fields */
  --ds-r-pill: 999px;   /* buttons, chips, status */

  /* Cards: one look everywhere (app-components.css .ds-card; dashboard.css maps every card class onto it): the surface,
     --ds-r-card and a faint edge, so a card reads on the light ground and inside white sheets alike. */
  --ds-card-edge: 0 0 0 1px rgb(18 18 22 / 0.07);
  --ds-card-edge-hover: 0 0 0 1px rgb(18 18 22 / 0.13), 0 4px 14px rgb(18 18 22 / 0.06);

  /* Shadows only on what floats. Nothing at rest has one. */
  --ds-shadow-float: 0 1px 2px rgb(18 18 22 / 0.06), 0 8px 24px rgb(18 18 22 / 0.12);
  --ds-shadow-dialog: 0 2px 6px rgb(18 18 22 / 0.08), 0 24px 64px rgb(18 18 22 / 0.22);

  /* Motion (the marketing site's): transform and opacity only, reduced motion drops the travel. */
  --ds-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ds-t-press: 120ms;
  --ds-t-hover: 180ms;
  --ds-t-enter: 280ms;
  color-scheme: light;
}

/* Dark: a blue-black ground (the marketing site's dark chapter), the hues stay, text on them stays dark. */
:root[data-theme="dark"] {
  --ds-ground: #0e0f15;
  --ds-surface: #16171f;
  --ds-surface-2: #1f2029;
  --ds-surface-3: #2a2b36;
  --ds-line: #2b2d39;
  --ds-line-strong: #3d3f4e;
  --ds-ink: #f2f2f6;
  --ds-ink-2: #b6b7c4;
  --ds-ink-3: #8e8f9e;
  --ds-scrim: rgb(0 0 0 / 0.55);
  --ds-action: #3d66ff;
  --ds-action-hover: #5b7dff;
  --ds-action-text: var(--ds-blue-300);
  --ds-action-soft: rgb(61 102 255 / 0.18);
  --ds-focus: var(--ds-blue-300);
  --ds-live-soft: rgb(255 210 63 / 0.16);
  --ds-live-text: var(--ds-sun-600);
  --ds-people-soft: rgb(255 138 31 / 0.18);
  --ds-people-text: var(--ds-orange-300);
  --ds-ok: #7fd3a0;     --ds-ok-soft: rgb(127 211 160 / 0.16);
  --ds-warn: #f2c76b;   --ds-warn-soft: rgb(242 199 107 / 0.16);
  --ds-danger: #f2b8b5; --ds-danger-soft: rgb(242 184 181 / 0.16);
  --ds-chart: #b88a10;
  --ds-chart-text: #d8a92a;
  --ds-chart-grid: #23242e;
  --ds-shadow-float: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.5);
  --ds-shadow-dialog: 0 2px 6px rgb(0 0 0 / 0.4), 0 24px 64px rgb(0 0 0 / 0.6);
  --ds-card-edge: 0 0 0 1px rgb(255 255 255 / 0.06);
  --ds-card-edge-hover: 0 0 0 1px rgb(255 255 255 / 0.12), 0 4px 14px rgb(0 0 0 / 0.4);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ds-ground: #0e0f15; --ds-surface: #16171f; --ds-surface-2: #1f2029; --ds-surface-3: #2a2b36;
    --ds-line: #2b2d39; --ds-line-strong: #3d3f4e; --ds-ink: #f2f2f6; --ds-ink-2: #b6b7c4; --ds-ink-3: #8e8f9e;
    --ds-scrim: rgb(0 0 0 / 0.55); --ds-action: #3d66ff; --ds-action-hover: #5b7dff; --ds-action-text: var(--ds-blue-300);
    --ds-action-soft: rgb(61 102 255 / 0.18); --ds-focus: var(--ds-blue-300); --ds-live-soft: rgb(255 210 63 / 0.16);
    --ds-live-text: var(--ds-sun-600); --ds-people-soft: rgb(255 138 31 / 0.18); --ds-people-text: var(--ds-orange-300);
    --ds-ok: #7fd3a0; --ds-ok-soft: rgb(127 211 160 / 0.16); --ds-warn: #f2c76b; --ds-warn-soft: rgb(242 199 107 / 0.16);
    --ds-danger: #f2b8b5; --ds-danger-soft: rgb(242 184 181 / 0.16); --ds-chart: #b88a10; --ds-chart-text: #d8a92a;
    --ds-chart-grid: #23242e; --ds-shadow-float: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.5);
    --ds-shadow-dialog: 0 2px 6px rgb(0 0 0 / 0.4), 0 24px 64px rgb(0 0 0 / 0.6);
    --ds-card-edge: 0 0 0 1px rgb(255 255 255 / 0.06); --ds-card-edge-hover: 0 0 0 1px rgb(255 255 255 / 0.12), 0 4px 14px rgb(0 0 0 / 0.4);
    color-scheme: dark;
  }
}