/**
 * Landing-page variables: aliases over the shared design tokens (css/tokens.css, generated from
 * frontend/styles/tokens.css). Every colour, shadow and motion value comes from a token so the site and the
 * extension share one palette; the night theme follows the tokens' own dark aliases, only the few values
 * that point at a fixed shade are redefined under [data-theme="dark"].
 * 404.html links only this file, so the tokens are imported here as well.
 */
@import url("tokens.css");

:root {
  /* brand */
  --primary: var(--ccn-brand);
  --primary-hover: var(--ccn-brand-hover);
  --primary-gradient: var(--ccn-brand-gradient);
  --secondary: var(--ccn-info-600);
  --secondary-hover: var(--ccn-info-700);
  --accent: var(--ccn-brand);
  --accent-hover: var(--ccn-brand-hover);
  --accent-gradient: linear-gradient(135deg, var(--ccn-brand-500) 0%, var(--ccn-brand-400) 100%);
  /* text colours that stay readable on the *-light tints and on brand gradients */
  --accent-text: var(--ccn-brand-700);
  --primary-text: var(--ccn-brand-700);
  --success-text: var(--ccn-success-700);
  --on-brand: var(--ccn-text-on-brand);

  /* surfaces */
  --background: var(--ccn-bg);
  --background-alt: var(--ccn-bg-subtle);
  --card-bg: var(--ccn-surface);

  /* text */
  --text-primary: var(--ccn-text);
  --text-secondary: var(--ccn-text-secondary);
  --text-muted: var(--ccn-text-muted);
  --text-inverse: var(--ccn-gray-0);

  /* borders */
  --border: var(--ccn-border);
  --border-hover: var(--ccn-border-strong);

  /* surfaces that are not plain card/background */
  --nav-bg: color-mix(in srgb, var(--ccn-surface) 92%, transparent);
  --footer-bg: var(--ccn-gray-800);
  --footer-text: var(--ccn-gray-0);
  --footer-muted: color-mix(in srgb, var(--ccn-gray-0) 80%, transparent);
  --footer-border: color-mix(in srgb, var(--ccn-gray-0) 10%, transparent);
  --focus-ring: color-mix(in srgb, var(--ccn-info-500) 35%, transparent);
  --overlay: var(--ccn-overlay);

  /* status */
  --success: var(--ccn-success);
  --success-light: var(--ccn-success-soft);
  --danger: var(--ccn-danger);
  --danger-light: var(--ccn-danger-soft);
  --warning: var(--ccn-warning);
  --warning-light: var(--ccn-warning-soft);
  --info: var(--ccn-info);
  --info-light: var(--ccn-info-soft);
  --primary-light: var(--ccn-brand-soft);

  /* typography */
  --font-family: var(--ccn-font);
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;
  --line-height: 1.6;

  /* spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;

  /* fixed header: about 48 px at 1280 x 720 up to 60 px from 1920 x 1080 (docs/design/ui-design-language.md §3.4) */
  --nav-h: clamp(48px, calc(24px + 3.34vh), 60px);
  --nav-font: clamp(13px, calc(7px + 0.56vh), 15px);
  --nav-logo: clamp(24px, calc(8px + 2.2vh), 32px);
  --nav-gap: clamp(16px, calc(4px + 1.67vh), 24px);

  /* page rhythm: the one vertical scale of every site page (docs/design/ui-design-language.md §3.4) */
  --site-hero-top: calc(var(--nav-h) + 40px);
  --site-hero-bottom: 24px;
  --site-section-y: 48px;
  --site-section-y-compact: 32px;
  --site-header-gap: 32px;
  --site-block-gap: 24px;
  --site-heading-gap: 8px;

  /* shape */
  --radius-sm: var(--ccn-radius-sm);
  --radius-md: var(--ccn-radius-md);
  --radius-lg: var(--ccn-radius-md);
  --radius-xl: var(--ccn-radius-lg);
  --radius-2xl: 16px;
  --radius-full: var(--ccn-radius-pill);

  --shadow-sm: var(--ccn-shadow-1);
  --shadow-md: var(--ccn-shadow-2);
  --shadow-lg: var(--ccn-shadow-3);
  --shadow-xl: var(--ccn-shadow-3);

  /* motion (docs/design/ui-design-language.md §4: hover A1, panels C1, accordions F0) */
  --transition-fast: var(--ccn-dur-2) var(--ccn-ease-out);
  --transition-base: var(--ccn-dur-3) var(--ccn-ease-out);
  --transition-slow: var(--ccn-dur-4) var(--ccn-ease-out);

  /* layers */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-tooltip: 500;

  /* container widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-max: 1400px;
}

/* Night theme: js/theme.js sets data-theme before first paint (manual choice → system preference → local
   time 07:00–18:59 day). The tokens flip their own aliases; these are the site-specific fixed shades. */
:root[data-theme="dark"] {
  --secondary: var(--ccn-info-500);
  --secondary-hover: var(--ccn-info-600);
  --accent-text: var(--ccn-brand-300);
  --primary-text: var(--ccn-brand-300);
  --success-text: color-mix(in srgb, var(--ccn-success-500) 65%, white);
  --text-inverse: var(--ccn-gray-950);
  --footer-bg: var(--ccn-gray-950);
  --footer-text: var(--ccn-gray-50);
  --footer-muted: color-mix(in srgb, var(--ccn-gray-50) 75%, transparent);
  --footer-border: color-mix(in srgb, var(--ccn-gray-50) 12%, transparent);
}