/* ==========================================================================
   SEO Tracker — "Dashboard" look (2026-10): grey canvas, one white rounded
   panel, soft tiles, orange + grey charts. Internal app only: the public sites
   keep the group's Swiss Editorial system.

   01-tokens.css: fonts, tokens, reset, base type, utilities.
   Load order: `stylesheet_link_tag :app` links every .css under app/assets
   sorted by path: 01-tokens → 02-components → 03-app → … → 06-dashboard
   (the dashboard skin and its components, loaded last). Docs: docs/DESIGN_SYSTEM.md
   ========================================================================== */

/* ---------- Fonts: Switzer 400 / 400 italic / 500 (ITF Free Font License,
   see app/assets/fonts/switzer-license-ITF-FFL.txt) ---------------------- */
@font-face { font-family: "Switzer"; src: url("/assets/switzer-400-511bc9c5.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/switzer-400-italic-78077e00.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/switzer-500-43309e60.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- Tokens ------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Colour: ink + greys on a grey canvas, one orange accent. */
  --canvas: #f2f3f5;       /* page background behind the white panel and the sidebar */
  --paper: #ffffff;
  --ink: #1d1f24;          /* text, headings */
  --grey: #9aa0a9;         /* display grey: 24px and up, comparison chart lines */
  --grey-text: #676d76;    /* small secondary text (5.2:1 on white, AA) */
  --rule: #eceef1;         /* hairlines, table rows */
  --field: #f3f4f6;        /* quiet buttons, bar tracks, code */
  --surface: #f7f8f9;      /* soft bands */
  --orange: #f26a1b;       /* the accent: charts, active nav, primary button. Text only at 18px+ */
  --orange-ink: #b8460a;   /* orange text at small sizes (4.9:1, AA) */
  --orange-tint: #fff3ea;
  --grey-tint: #f2f3f5;
  --signal: #f26a1b;       /* attention marks (warning dots, Google updates) */
  --danger: #d1372b;       /* bad: critical findings, falls, errors, failed syncs */
  --danger-tint: #fdeeec;
  --success: #1f8a4c;      /* good changes */
  --success-tint: #eaf6ee;
  --scrim: rgb(255 255 255 / 0.92);
  --shadow-panel: 0 1px 2px rgb(16 24 40 / 0.04), 0 12px 40px rgb(16 24 40 / 0.06);
  --shadow-pop: 0 10px 30px rgb(16 24 40 / 0.12);

  /* App data tokens. */
  --up: var(--success);
  --down: var(--danger);
  --series-1: var(--orange);
  --series-2: var(--grey);
  --series-3: #3f444c;
  --chart-grid: #eef0f2;

  /* Aliases for older class rules and inline styles (keep working; prefer the names above). */
  --bg: var(--paper);
  --line: var(--rule);
  --line-strong: #d4d4d4;
  --surface-2: var(--field);
  --ink-2: #3d3d3d;
  --muted: var(--grey-text);
  --accent: var(--orange);
  --accent-strong: var(--orange-ink);
  --accent-weak: var(--orange-tint);
  --on-accent: var(--paper);
  --good: var(--up);
  --bad: var(--danger);
  --warn: var(--ink);
  --warn-mark: var(--signal);
  --focus: var(--orange);
  --font-sans: var(--font);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type */
  --font: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --t-display: clamp(1.75rem, 1.35rem + 1.2vw, 2.5rem);   /* 28 → 40: page titles */
  --t-xl: clamp(1.625rem, 1.25rem + 1.1vw, 2.25rem);      /* 26 → 36: KPI numbers */
  --t-l: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);       /* 20 → 26 */
  --t-m: 1.25rem;                                         /* 20: section titles */
  --t-body: 1rem;                                         /* 16 */
  --t-s: 0.875rem;                                        /* 14: tables, meta */
  --t-xs: 0.8125rem;                                      /* 13: chart axes, dense meta */
  --lh-tight: 1.1;
  --lh-head: 1.18;
  --lh-body: 1.4;
  --track-display: -0.015em;
  --track-head: -0.01em;
  --track-body: 0.01em;

  /* Space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --gutter: clamp(16px, 3vw, 40px);
  --col-gap: 24px;
  --header-h: 64px;
  --sidebar-w: 16rem;

  --radius: 10px;           /* buttons, fields */
  --radius-small: 6px;
  --radius-card: 16px;      /* tiles, cards */
  --radius-panel: 28px;     /* the white main panel */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 240ms;
}

/* ---------- Reset & base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s-5)); }
body {
  margin: 0; min-height: 100dvh;
  background: var(--canvas); color: var(--ink);
  font-family: var(--font); font-size: var(--t-body); font-weight: 400;
  line-height: var(--lh-body); letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: 500; letter-spacing: var(--track-head); line-height: var(--lh-head); text-wrap: balance; }
h1 { font-size: var(--t-display); line-height: 1.12; letter-spacing: var(--track-display); }
h2 { font-size: var(--t-m); line-height: 1.3; }
h3 { font-size: var(--t-body); }
p, li, dd { text-wrap: pretty; overflow-wrap: break-word; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 500; }
small { font-size: var(--t-s); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid var(--rule); margin-block: var(--s-6); }
code, kbd, pre, .mono { font-family: var(--font-mono); font-size: 0.86em; letter-spacing: 0; }
kbd { font: inherit; font-size: var(--t-s); color: var(--grey-text); }
abbr[title] { text-decoration: underline dotted; cursor: help; }
[hidden] { display: none !important; }
main:focus { outline: none; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--orange-tint); color: var(--ink); }

/* Links inside running text are underlined; navigation links are not. */
p > a:not([class]), li > a:not([class]), dd > a:not([class]), td > a:not([class]), .field__hint a, .empty-state a:not(.btn), .cell-sub a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-strong);
  transition: text-decoration-color var(--dur) var(--ease);
}
p > a:not([class]):hover, li > a:not([class]):hover, dd > a:not([class]):hover, td > a:not([class]):hover, .field__hint a:hover, .empty-state a:not(.btn):hover, .cell-sub a:hover { text-decoration-color: currentColor; }

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  padding: 12px 16px; border-radius: var(--radius);
  background: var(--ink); color: var(--paper);
}
.skip-link:focus-visible { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Utilities ---------------------------------------------------- */
.grey { color: var(--grey); }                 /* display sizes only */
.muted { color: var(--grey-text); }
.small { font-size: var(--t-s); }
.num, .tnum, .tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.good { color: var(--up); }
.bad { color: var(--danger); }
.warn { color: var(--ink); }
.warn::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: 6px; border-radius: 50%; background: var(--signal); vertical-align: 0.12em; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}