/*
 * Design tokens — single source of truth for color, type, space, motion.
 * Load order: tokens.css → ui-kit.css → chrome.css → page CSS (home/settings/…)
 *             → search.css (SERP) → omnibox.css (injected).
 * Do not redeclare these values in page stylesheets; extend via var().
 */

:root {
  color-scheme: light;
  interpolate-size: allow-keywords;
  font-family:
    InterVar, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  /* Syntax highlight (API / code pages) — each ≥ 4.5:1 on --surface0 */
  --sh-class: #1d62eb;
  --sh-identifier: #327d22;
  --sh-sign: #4c4f69;
  --sh-property: #13787d;
  --sh-entity: #0373a0;
  --sh-jsxliterals: #b74808;
  --sh-string: #986114;
  --sh-keyword: #186ad5;
  --sh-comment: #6a6d78;

  --text: #202124;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface0: #f1f3f4;
  --surface1: #e8eaed;
  --subtext: #3c4043;
  /*
   * Accent. #1967d2 keeps ≥ 4.5:1 on white, --surface0 and 10% blue tints
   * (#1a73e8 measured 4.05:1 on --surface0). A user accent from Settings
   * arrives as --accent-light (pre-darkened for AA by theme-boot.js).
   */
  --blue: var(--accent-light, #1967d2);
  --link: #1a0dab;
  --visited: #681da8;
  --muted: #5f6368;
  --green: #188038;
  --red: #d93025;
  --yellow: #f9ab00;
  --mauve: #a142f4;
  --teal: #0d9488;

  /* Control sizing */
  --control-height: 44px;
  --search-bar-height: 48px;
  --search-bar-height-home: 52px;

  /*
   * Motion — Apple-grade harmony: open slightly longer than close;
   * micro-feedback uses --duration-fast. Prefer these tokens over raw ms.
   */
  --motion-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --motion-open: 0.22s;
  --motion-close: 0.16s;
  --motion-blur: 4px;
  --motion-pre-scale: 0.985;
  --ease-out: var(--motion-ease);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.1s;
  --duration-base: 0.16s;
  --duration-slow: 0.22s;
  --duration-view: 0.1s;
  /* Soft entrance for SERP cards / staggered reveals */
  --duration-enter: 0.28s;
  /* Aliases so open/close semantics stay explicit in UI chrome */
  --duration-open: var(--motion-open);
  --duration-close: var(--motion-close);
  --toggle-track-off: rgb(0 0 0 / 0.12);
  --toggle-dur: 350ms;
  --toggle-travel: 20px;
  --toggle-ov1: 2px;
  --toggle-ov2: 1px;
  --toggle-ease: cubic-bezier(0.34, 1.35, 0.64, 1);

  /*
   * Radius ladder — Apple continuous corners by role/size.
   * Prefer these over raw px. Outer → inner: subtract padding (~8–10px).
   */
  --r-hair: 2px;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-3xl: 20px;
  --r-4xl: 24px;
  --r-chip: var(--r-xl);
  --r-surface: 14px;
  --r-control: var(--r-2xl);
  --r-card: var(--r-3xl);
  --r-sheet: 28px;
  --r-pill: 999px;
  /* Search — capsule when closed; continuous card when open */
  --r-search: var(--r-pill);
  --r-omnibox-open: var(--r-4xl);
  --r-omnibox-panel: var(--r-omnibox-open);
  /* Inner continuous: open card 24 − ~10 inset ≈ 14 */
  --r-omnibox-item: var(--r-surface);
  /* Semantic aliases (menus / dialogs / rows) */
  --r-menu: var(--r-surface);
  --r-menu-item: var(--r-lg);
  --r-dialog: var(--r-3xl);
  --r-input: var(--r-lg);
  --r-thumb: var(--r-md);

  /* Spacing scale (gutters / chrome) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* Control / icon sizes */
  --hit-target: 40px;
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 22px;
  --control-height-sm: 32px;

  --border: #dadce0;
  --border-strong: #bdc1c6;
  --line: color-mix(in srgb, var(--border) 90%, transparent);
  --line-strong: var(--border);
  --lift-1: 0 1px 2px rgb(60 64 67 / 0.06), 0 4px 12px rgb(60 64 67 / 0.06);
  --lift-2: 0 2px 6px rgb(60 64 67 / 0.08), 0 8px 24px rgb(60 64 67 / 0.1);
  --lift: var(--lift-1);
  --lift-hover: var(--lift-2);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--blue) 28%, transparent);
  --focus-outline: 2px solid var(--blue);
  --focus-outline-offset: 2px;
  --scrim: rgb(32 33 36 / 0.55);
  --scrim-strong: rgb(0 0 0 / 0.4);
  --header-bg: color-mix(in srgb, var(--bg) 88%, transparent);

  /* Shared popover / menu open language */
  --popover-from-scale: 0.97;
  --popover-from-y: -2px;
  --popover-blur: var(--motion-blur);

  /* Search bar — elevated capsule (classic Searchia + Apple polish) */
  --search-bar-bg: var(--bg);
  --search-bar-shadow:
    rgba(31, 31, 31, 0.08) 0 1px 2px 0, rgba(31, 31, 31, 0.06) 0 2px 6px 2px;
  --search-bar-shadow-hover:
    rgba(31, 31, 31, 0.12) 0 1px 3px 0, rgba(31, 31, 31, 0.08) 0 4px 12px 3px;
  --search-bar-shadow-focus:
    rgba(31, 31, 31, 0.14) 0 1px 3px 0, rgba(31, 31, 31, 0.1) 0 4px 14px 3px;
  --omnibox-panel-shadow:
    0 2px 4px rgb(0 0 0 / 0.08), 0 12px 28px -8px rgb(0 0 0 / 0.22);
  --omnibox-open-shadow: var(--search-bar-shadow-focus);

  /* —— Semantic roles (prefer these in components; avoid raw hex) —— */
  --color-text: var(--text);
  --color-text-secondary: var(--subtext);
  --color-text-muted: var(--muted);
  --color-surface: var(--surface);
  --color-surface-raised: var(--surface0);
  --color-bg: var(--bg);
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);
  --color-accent: var(--blue);
  --color-link: var(--link);
  --color-link-visited: var(--visited);
  --color-danger: var(--red);
  --color-success: var(--green);
  --color-warning: var(--yellow);
  /* --yellow is a fill colour (1.9:1 on white); use this for warning text. */
  --color-warning-text: #b06000;

  /* —— Component tokens (SERP / chrome) —— */
  --result-gap: var(--space-4);
  --result-pad-y: 16px;
  --result-title-size: 1.125rem;
  --result-title-weight: 500;
  --result-desc-size: 0.875rem;
  --result-desc-lh: 1.55;
  --result-cite-size: 0.8125rem;
  --result-favicon-size: 18px;
  --result-thumb-h: 96px;
  --tab-height: 40px;
  --type-body: 15px;
  --type-meta: 13px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --sh-class: #8ab4f8;
  --sh-identifier: #81c995;
  --sh-sign: #e8eaed;
  --sh-property: #78d9ec;
  --sh-entity: #78d9ec;
  --sh-jsxliterals: #fcad70;
  --sh-string: #fdd663;
  --sh-keyword: #8ab4f8;
  --sh-comment: #9aa0a6;
  --text: #e8eaed;
  --bg: #202124;
  --surface: #303134;
  --surface0: #303134;
  --surface1: #3c4043;
  --subtext: #bdc1c6;
  --blue: var(--accent-dark, #8ab4f8);
  --link: #8ab4f8;
  --visited: #c58af9;
  --muted: #9aa0a6;
  --green: #81c995;
  --red: #f28b82;
  --yellow: #fdd663;
  --mauve: #c58af9;
  --teal: #2dd4bf;
  --color-warning-text: var(--yellow);
  --border: #5f6368;
  --border-strong: #9aa0a6;
  --line: color-mix(in srgb, #5f6368 55%, transparent);
  --line-strong: #5f6368;
  --lift-1: 0 1px 2px rgb(0 0 0 / 0.28), 0 4px 12px rgb(0 0 0 / 0.22);
  --lift-2: 0 2px 6px rgb(0 0 0 / 0.32), 0 10px 28px rgb(0 0 0 / 0.38);
  --lift: var(--lift-1);
  --lift-hover: var(--lift-2);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--blue) 36%, transparent);
  --scrim: rgb(0 0 0 / 0.62);
  --scrim-strong: rgb(0 0 0 / 0.55);
  --header-bg: color-mix(in srgb, var(--bg) 88%, transparent);
  --glow-opacity: 0.85;
  --toggle-track-off: rgb(255 255 255 / 0.15);
  --search-bar-bg: var(--surface0);
  --search-bar-shadow:
    rgba(0, 0, 0, 0.35) 0 1px 2px 0, rgba(0, 0, 0, 0.28) 0 2px 8px 2px;
  --search-bar-shadow-hover:
    rgba(0, 0, 0, 0.42) 0 1px 3px 0, rgba(0, 0, 0, 0.35) 0 4px 14px 3px;
  --search-bar-shadow-focus:
    rgba(0, 0, 0, 0.48) 0 1px 3px 0, rgba(0, 0, 0, 0.4) 0 4px 16px 3px;
  --omnibox-panel-shadow:
    0 2px 4px rgb(0 0 0 / 0.2), 0 16px 32px -12px rgb(0 0 0 / 0.5);
  --omnibox-open-shadow: var(--search-bar-shadow-focus);
}