/* Velo console design system: tokens.
 *
 * The single source for every value the console paints with. Values are measured
 * from the approved prototype (veloconsent.com/app-preview, source in
 * apps/marketing/dist/app-preview/) as it renders with desktop.css, typography.css
 * and refinements.css applied in that order, so refinements.css (Walter, 16 Sept)
 * wins wherever the three disagree.
 *
 * Load order on every page: ds/tokens.css, ds/components.css, then the page's own
 * *-satoshi.css (layout only, no new buttons/selects/inputs). No build step: these
 * files are served as-is by apps/admin/dev.mjs and the edge-api Worker.
 * Documented in Storybook: apps/storybook (npm run storybook).
 */

/* Satoshi variable (Fontshare), self-hosted. One file per style covers 300-900. */
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/app-preview/assets/satoshi-variable-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Satoshi';
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url('/app-preview/assets/satoshi-variable-italic.woff2') format('woff2');
}

:root {
  /* ---- Type ------------------------------------------------------------ */
  --sat-font: 'Satoshi', Arial, sans-serif;
  --sat-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Sizes (refinements.css final :root block + typography.css roles). */
  --sat-type-page: 51.84px;       /* page <h1>; 42px <=900px, 36px <=600px */
  --sat-type-feature: 30.24px;    /* dialog <h2>, feature copy */
  --sat-type-section: 23.76px;    /* card <h2> */
  --sat-type-body: 15.12px;       /* body copy, inputs */
  --sat-type-control: 14.04px;    /* buttons, selects, nav, tabs, table cells */
  --sat-type-meta: 12.96px;       /* labels, tags, table headers */
  --sat-type-micro: 11.88px;      /* footer, count pills */
  --sat-type-stat: 43.2px;       /* stat tile number */
  --sat-type-metric: 51.84px;     /* card metric */
  --sat-type-metric-lg: 69.12px;  /* the one headline metric */

  /* Weights. Page titles are regular (400) with a 550 <em> phrase; card titles,
   * controls and nav are 500; the big metric is 450 (refinements.css). */
  --sat-weight-body: 400;
  --sat-weight-display: 450;
  --sat-weight-medium: 500;
  --sat-weight-strong: 550;
  --sat-weight-bold: 600;
  /* Older names, still read by page CSS. */
  --sat-weight-number: 500;
  --sat-weight-number-lg: 600;

  /* ---- Colour ---------------------------------------------------------- */
  --sat-ink: #231d2e;
  --sat-ink-hover: #3a3145;
  --sat-muted: #665d71;        /* secondary text. Prototype #73697f is 4.2:1 on its
                                  lavender gradient; this clears AA (5.1:1). */
  --sat-meta: #7d7389;         /* labels, tags, footers */
  --sat-nav-idle: #51475f;     /* inactive nav item (refinements.css) */
  --sat-link: #665471;         /* card-head links, row links */
  --sat-accent: #c3adf4;
  --sat-accent-light: #e5d7f6; /* avatar ground */
  --sat-accent-deep: #b79df2;
  --sat-surface: #fff;
  --sat-surface-soft: #f3effa;
  --sat-surface-field: #f7f3fb; /* search/filter fields inside cards */
  --sat-surface-hover: #eae4f1;
  --sat-tag-bg: #f4eff9;
  --sat-line: #efecf2;
  --sat-line-strong: #e8e3ed;  /* header divider */
  --sat-line-input: #e6dff0;
  --sat-line-table: #f0ebf5;
  --sat-card: #ffffffdf;
  --sat-page-bg: radial-gradient(ellipse at 65% 0, #eee6f84d, transparent 65%), #f5f3f7;
  --sat-success: #1f7a4d;
  --sat-success-bg: #e6f4ec;
  --sat-warning: #8a6410;
  --sat-warning-bg: #fbf3df;
  --sat-danger: #b3403f;
  --sat-danger-hover: #963332;
  --sat-danger-bg: #fbeceb;

  /* ---- Controls -------------------------------------------------------- */
  --sat-control-h: 40px;       /* buttons, selects, site switcher, inputs, tabs */
  --sat-control-h-sm: 32px;    /* in-row actions, copy buttons */
  --sat-control-pad: 18px;
  --sat-control-pad-sm: 12px;
  --sat-icon: 16px;
  --sat-icon-nav: 15px;

  /* ---- Radius (refinements.css) --------------------------------------- */
  --sat-radius-card: 16px;     /* 14px on phones */
  --sat-radius-inner: 12px;    /* panels inside cards, menus */
  --sat-radius-control: 999px; /* buttons, selects, nav, tabs */
  --sat-radius-small: 8px;     /* text inputs, bars */
  --sat-radius-tag: 6px;

  /* ---- Spacing --------------------------------------------------------- */
  --sat-space-1: 4px;
  --sat-space-2: 8px;
  --sat-space-3: 12px;
  --sat-space-4: 16px;
  --sat-space-5: 20px;
  --sat-space-6: 24px;
  --sat-space-7: 28px;
  --sat-space-8: 36px;
  --sat-card-pad: 27px;
  --sat-grid-gap: 20px;

  /* ---- Layout ---------------------------------------------------------- */
  --sat-header-h: 88px;
  --sat-page-max: 1510px;
  --sat-page-pad-x: 42px;
  --sat-logo-w: 72px;          /* 64px <1190px, 60px on phones */

  /* ---- Shadows --------------------------------------------------------- */
  --sat-shadow-sm: 0 1px 4px rgba(35, 29, 46, .05);
  --sat-shadow-card: 0 3px 6px rgba(88, 64, 105, .02);
  --sat-shadow-elevated: 0 8px 25px rgba(119, 88, 139, .08);
  --sat-shadow-dialog: 0 10px 40px rgba(35, 29, 46, .13);

  /* ---- Aliases for shared renderers (chart.js, line-chart.js, experiments.js)
   * that read the older variable names. Point them at the palette above. */
  --bg: #fff;
  --card: var(--sat-card);
  --ink: var(--sat-ink);
  --bright: var(--sat-ink);
  --muted: var(--sat-muted);
  --dim: var(--sat-muted);
  --line: var(--sat-line);
  --well: var(--sat-surface-soft);
  --accent: var(--sat-accent-deep);
  --accent2: var(--sat-accent-deep);
  --green: var(--sat-success);
  --amber: var(--sat-warning);
  --red: var(--sat-danger);
  --font: var(--sat-font);
  --font-mono: var(--sat-font);
  --fw-strong: var(--sat-weight-medium);
  --fw-body: var(--sat-weight-body);
  --fw-chip: var(--sat-weight-medium);
  --r-pill: var(--sat-radius-control);
  --r-btn: var(--sat-radius-control);
  --r-card: var(--sat-radius-card);
  --r-table: var(--sat-radius-inner);
  --r-input: var(--sat-radius-small);
  --sh-card: var(--sat-shadow-card);
  --sh-pop: var(--sat-shadow-elevated);
}

@media (max-width: 1190px) { :root { --sat-logo-w: 64px; --sat-page-pad-x: 30px; } }
@media (max-width: 900px) { :root { --sat-type-page: 45.36px; } }
@media (max-width: 600px) {
  :root { --sat-type-page: 38.88px; --sat-type-feature: 28.08px; --sat-logo-w: 60px; --sat-page-pad-x: 18px; --sat-card-pad: 24px; }
}