/*
 * Design tokens — sourced directly from the Figma file "2026" via the
 * Theme Colors, Typography, and Spacing variable collections (pulled with
 * use_figma over the Plugin API; last synced 2026-07-06). Colours and the
 * type scale are exact; structural tokens (grid/motion) live here too.
 *
 * Theme model: the `Theme Colors` collection has 7 modes. They map to the
 * data-theme keys the app produces (classify.mjs) as:
 *   Neutral=neutral, Sunny Day=clear-day, Grey Day=cloudy-day,
 *   Sunny Sunset=clear-twilight, Grey Sunset=cloudy-twilight,
 *   Clear Night=clear-night, Cloudy Night=cloudy-night.
 *
 * Each theme overrides the core colour tokens below. Derived aliases
 * (--color-surface, --bg-gradient, globe colours, etc.) are defined once in
 * :root from the core tokens, so they re-resolve automatically per theme.
 */

:root {
  /* ---------- Grid (12px base unit, 12-column layout) ---------- */
  --grid-unit: 12px;
  --grid-columns: 12;
  --grid-gutter: var(--grid-unit);
  --grid-max-width: 1332px; /* desktop artboard width */
  --grid-content-width: 1140px; /* content column (artboard margin 96px) */
  --grid-margin: calc(var(--grid-unit) * 8); /* 96px desktop side margin */

  /* ---------- Spacing (Figma Spacing collection) ---------- */
  --space-xxs: 3px;
  --space-xs: 6px;
  --space-s: 12px;
  --space-m: 24px;
  --space-l: 36px;
  --space-xl: 48px;
  --space-xxl: 96px;

  /* Legacy aliases (earlier scaffolding used numbered steps) */
  --space-1: var(--space-xs);
  --space-2: var(--space-s);
  --space-3: var(--space-m);
  --space-4: var(--space-l);
  --space-5: var(--space-xl);
  --space-6: 72px;
  --space-7: var(--space-xxl);

  /* ---------- Typography (Typography collection) ---------- */
  --font-display: "Questa Grande", Georgia, "Times New Roman", serif;
  /* "Questa" is the serif text face (H2/H4 in the design). */
  --font-serif: "Questa", Georgia, "Times New Roman", serif;
  --font-body: "Questa Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Questa weight names -> numeric (Light, Regular, Medium, Bold, Black) */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  /* Size scale (px in Figma -> rem at 16px root) */
  --size-xs: 0.5625rem; /* 9  */
  --size-s: 0.75rem; /* 12 */
  --size-m: 1rem; /* 16 */
  --size-l: 1.3125rem; /* 21 */
  --size-xl: 1.6875rem; /* 27 */
  --size-2xl: 2.25rem; /* 36 */
  --size-3xl: 2.9375rem; /* 47 */
  --size-4xl: 5rem; /* 80 */

  /* Per-element type shorthands: font = weight size/line-height family */
  --type-h1: var(--weight-regular) var(--size-4xl)/6rem var(--font-display); /* 80/96 Grande Regular */
  --type-h2: var(--weight-regular) var(--size-3xl)/3.75rem var(--font-serif); /* 47/60 Questa Regular */
  --type-h3: var(--weight-medium) var(--size-2xl)/3rem var(--font-body); /* 36/48 Sans Medium */
  --type-h4: var(--weight-regular) var(--size-xl)/2.25rem var(--font-serif); /* 27/36 Questa Regular */
  --type-h5: var(--weight-medium) var(--size-l)/2rem var(--font-body); /* 21/32 Sans Medium */
  --type-h6: var(--weight-bold) var(--size-m)/1.5rem var(--font-body); /* 16/24 Sans Bold */
  --type-body: var(--weight-regular) var(--size-m)/1.5rem var(--font-body); /* 16/24 Sans Regular */
  --type-caption: var(--weight-regular) var(--size-s)/1.125rem var(--font-body); /* 12/18 Sans Regular */
  --type-footnote: var(--weight-regular) var(--size-xs)/0.75rem var(--font-body); /* 9/12 Sans Regular */

  /* ---------- Motion ---------- */
  --theme-transition-duration: 800ms;
  --theme-transition-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Theme colour contract (defaults = Neutral mode) ---------- */
  --color-bg: #fdfaff;
  --color-bg-highlight: #fdf2fd;
  --color-text: #0e0d0d;
  --color-link: #e5101e;
  --color-accent: #f74652;
  --ui-selected-bg: #fdf2fd;
  --ui-selected-text: #0e0d0d;
  --photo-bg: #fdfaff;
  --photo-fg: #f74652;
  --card-bg: #ffffff;
  --button-bg: #e5101e;
  --button-text: #ffffff;
  --letter-shadow: #ffffff00;

  /* ---------- Derived aliases (resolve per active theme) ---------- */
  --color-surface: var(--card-bg);
  --color-text-muted: color-mix(
    in srgb,
    var(--color-text) 62%,
    var(--color-bg)
  );
  --color-link-hover: var(--color-accent);
  --color-border: color-mix(in srgb, var(--color-text) 18%, transparent);

  --bg-gradient-hero: linear-gradient(
    180deg in oklab,
    var(--color-bg-highlight) 0%,
    var(--color-bg) 100%
  );

  --bg-gradient-content-visible-height: 110px;

  --bg-gradient-content: linear-gradient(
    180deg in oklab,
    var(--color-bg-highlight) 0,
    var(--color-bg) var(--bg-gradient-content-visible-height),
    var(--color-bg-transparent) 160px
  );

  /* Wireframe globe line-art */
  --globe-line: var(--color-accent);
}

[data-theme="neutral"] {
  --color-bg: #fdfaff;
  --color-bg-transparent: #fdfaff00;
  --color-bg-highlight: #fdf2fd;
  --color-text: #0e0d0d;
  --color-link: #e5101e;
  --color-accent: #f74652;
  --ui-selected-bg: #fdf2fd;
  --ui-selected-text: #0e0d0d;
  --photo-bg: #fdfaff;
  --photo-fg: #f74652;
  --card-bg: #ffffff;
  --button-bg: #e5101e;
  --button-text: #ffffff;
  --letter-shadow: #ffffff00;
}

[data-theme="clear-day"] {
  /* Sunny Day */
  --color-bg: #e7f9fe;
  --color-bg-transparent: #e7f9fe00;
  --color-bg-highlight: #c0e6fc;
  --color-text: #2c1b01;
  --color-link: #1383c4;
  --color-accent: #5fbcf1;
  --ui-selected-bg: #c0e6fc;
  --ui-selected-text: #2c1b01;
  --photo-bg: #e7f9fe;
  --photo-fg: #5fbcf1;
  --card-bg: #ffffff;
  --button-bg: #1383c4;
  --button-text: #ffffff;
  --letter-shadow: #c0e6fc;
}

[data-theme="cloudy-day"] {
  /* Grey Day */
  --color-bg: #f0f3f4;
  --color-bg-transparent: #f0f3f400;
  --color-bg-highlight: #cbdbdd;
  --color-text: #57686b;
  --color-link: #038675;
  --color-accent: #568f75;
  --ui-selected-bg: #cbdbdd;
  --ui-selected-text: #57686b;
  --photo-bg: #f0f3f4;
  --photo-fg: #568f75;
  --card-bg: #ffffff;
  --button-bg: #038675;
  --button-text: #ffffff;
  --letter-shadow: #ffffff00;
}

[data-theme="clear-twilight"] {
  /* Sunny Sunset */
  --color-bg: #fdc18b;
  --color-bg-transparent: #fdc18b00;
  --color-bg-highlight: #d77f9f;
  --color-text: #6b1f0a;
  --color-link: #5a0275;
  --color-accent: #f46c57;
  --ui-selected-bg: #efe471;
  --ui-selected-text: #f46c57;
  --photo-bg: #fdc18b;
  --photo-fg: #d77f9f;
  --card-bg: #f4db95;
  --button-bg: #fdc18b;
  --button-text: #6b1f0a;
  --letter-shadow: #cf9d91;
}

[data-theme="cloudy-twilight"] {
  /* Grey Sunset */
  --color-bg: #b9c0c5;
  --color-bg-transparent: #b9c0c500;
  --color-bg-highlight: #4f5659;
  --color-text: #2b393b;
  --color-link: #057059;
  --color-accent: #d3dfe1;
  --ui-selected-bg: #4f5659;
  --ui-selected-text: #cbdbdd;
  --photo-bg: #cbdbdd;
  --photo-fg: #4f5659;
  --card-bg: #b7cbcd;
  --button-bg: #057059;
  --button-text: #ffffff;
  --letter-shadow: #b9c0c5;
}

[data-theme="clear-night"] {
  /* Clear Night */
  --color-bg: #001228;
  --color-bg-transparent: #00122800;
  --color-bg-highlight: #3b064c;
  --color-text: #c3e7fc;
  --color-link: #e3e1c0;
  --color-accent: #0bf9e5;
  --ui-selected-bg: #3b064c;
  --ui-selected-text: #c3e7fc;
  --photo-bg: #6041bd;
  --photo-fg: #001228;
  --card-bg: #0a193e;
  --button-bg: #6041bd;
  --button-text: #ffffff;
  --letter-shadow: #ffffff00;
}

[data-theme="cloudy-night"] {
  /* Cloudy Night */
  --color-bg: #0c1f22;
  --color-bg-transparent: #0c1f2200;
  --color-bg-highlight: #5c6468;
  --color-text: #cbcbc9;
  --color-link: #0ce4ca;
  --color-accent: #c5be5e;
  --ui-selected-bg: #5c6468;
  --ui-selected-text: #cbcbc9;
  --photo-bg: #c5be5e;
  --photo-fg: #0c1f22;
  --card-bg: #000000;
  --button-bg: #c5be5e;
  --button-text: #0c1f22;
  --letter-shadow: #ffffff00;
}