/* TechSparq DAM design tokens. Copied from docs/handoff.md, Design tokens. Components use these variables, never raw hex values. */
:root {
  /* Brand */
  --red: #D0021B;            --red-hover: #E70909;
  --red-text: #D0021B;       /* red words and links */
  /* Surfaces and text, light */
  --page: #FAF9F6;           --surface: #F8F6F2;
  --tone-1: rgba(26,26,26,.06);  --tone-2: rgba(26,26,26,.11);
  --tone-solid: #F0EDE7;     --tone-solid-hover: #E6E2DA;
  --text: #1A1A1A;           --text-2: #2E2E2E;
  --text-quiet: #5F5F5F;     /* solid surfaces only, never on glass */
  --rule: #D8D4CE;           --field-active: #FFFFFF;
  --active-tint: #FBE6E8;    --active-text: #B10218;
  --inverse-bg: #1A1A1A;     --inverse-text: #FAF9F6;
  /* Fixed colors. These do not flip with theme: white stays white on the red
     accent and over photo and video scrims, and media backdrops stay near
     black because photos and video are never shown on a light surface. */
  --on-red: #FFFFFF;         /* text and icons on the red accent */
  --on-media: #FFFFFF;       /* white controls, labels and badges over media */
  --on-media-ink: #111111;   /* a dark glyph on a light control over media (the play triangle) */
  --media-bg: #0A0A0A;       /* near black letterbox behind contained media */
  --media-bg-soft: #121212;  /* a slightly lifted media backdrop (logo cards) */
  --media-chip: #2A2A2A;     /* small opaque dark chip over media (the type badge) */
  /* Glass */
  --glass: rgba(250,249,246,.78);
  --glass-text-2: #2E2E2E;
  --glass-dark: rgba(26,26,26,.72);
  --glass-dark-text-2: rgba(255,255,255,.85);
  --glass-blur: blur(24px) saturate(140%);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.75), inset 0 0 0 1px rgba(255,255,255,.4);
  /* Shape, space, type, motion */
  --radius: 6px;             /* never on photos or video */
  --space: 8px;              --margin: 64px;  --gutter: 32px;
  --font-display: "Playfair Display", Georgia, serif;
  --font-ui: Barlow, Calibri, sans-serif;
  --title: 40px;  --section: 24px;  --body: 15px;  --label: 12px;
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --t-hover: 120ms;  --t-enter: 320ms;
  --focus: 0 0 0 2px var(--page), 0 0 0 4px var(--text);
}

[data-theme="dark"] {
  --red-text: #FF4D5E;
  --page: #161616;           --surface: #1E1E1E;
  --tone-1: rgba(255,255,255,.08);  --tone-2: rgba(255,255,255,.13);
  --tone-solid: #242424;     --tone-solid-hover: #2E2E2E;
  --text: #EDEAE4;           --text-2: #D8D4CE;
  --text-quiet: #A8A39B;     --rule: #3A3A3A;
  --field-active: #0F0F0F;
  --active-tint: rgba(255,77,94,.18);  --active-text: #FF7A86;
  --inverse-bg: #EDEAE4;     --inverse-text: #161616;
  --glass: rgba(30,30,30,.72);         --glass-text-2: #D8D4CE;
  --glass-dark: rgba(52,52,52,.78);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.06);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-hover: 0ms; --t-enter: 0ms; }
}

@supports not (backdrop-filter: blur(1px)) {
  :root { --glass: #F8F6F2; --glass-dark: #2E2E2E; }
  [data-theme="dark"] { --glass: #1E1E1E; --glass-dark: #343434; }
}