/*
  Design tokens for sainaveigel.com
  ---------------------------------
  Change colours, fonts and spacing here; every page reads from these values.

  Palette "Ocean & Champagne":
  - ocean blues carry weight (dark bands, links, buttons) and stay in the
    AI TechDoc blue family;
  - cream is the calm background;
  - champagne gold is a sparing accent. Light champagne is used on dark ocean
    only; on cream, gold text uses the darker --color-gold-text.
  All text pairs meet WCAG AA (4.5:1 or higher).
*/

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Colour: ocean */
  --color-ink: #0b1e33;          /* body text and headings, 15.9:1 on cream */
  --color-ink-muted: #4a5a6e;    /* secondary text, 6.6:1 on cream */
  --color-blue: #1d5a8e;         /* links, primary buttons, 6.8:1 on cream */
  --color-blue-deep: #0b2a4a;    /* dark bands: hero, collaboration */
  --color-blue-night: #081d33;   /* footer */
  --color-blue-mist: #e3ecf4;    /* cool tinted panels */
  --color-focus: #2b6cb0;        /* keyboard focus ring on light surfaces */

  /* Colour: cream */
  --color-paper: #fbf8f1;        /* page background */
  --color-paper-raised: #fffdf8; /* cards and raised surfaces */
  --color-sand: #f4efe3;         /* alternating section background */
  --color-line: #e4dccb;         /* hairlines and borders */

  /* Colour: champagne gold */
  --color-gold: #d4b56a;         /* accent on dark ocean only, 7.4:1 */
  --color-gold-light: #e7d39b;   /* highlights on dark ocean, 9.8:1 */
  --color-gold-text: #7a5c16;    /* gold-toned text on cream, 5.9:1 */
  --color-gold-soft: #efe3c4;    /* tint for status labels on cream */
  --color-gold-line: #d9c28a;    /* decorative gold rules on cream (no text) */

  /* Colour: stored energy in case-note drawings (the only warm signal colour;
     graphics only, never text) */
  --color-energy: #c8641e;
  --color-energy-soft: #f6dcc6;

  /* Colour: microlearning. A sea-green, amber and ocean trio marks the three
     feedback states (correct, hint, solution; always with a text label, never
     colour alone); soft tints set one colour per voice. All text pairs meet
     WCAG AA. */
  --color-learn-stage: #123a5e;      /* course stage, between blue and deep */
  --color-learn-sea: #1f6b63;        /* correct, 5.3:1 on its tint */
  --color-learn-sea-soft: #dcefe9;
  --color-learn-amber: #8a5300;      /* hint after the first attempt, 5.4:1 */
  --color-learn-amber-soft: #fbeccb;
  --color-learn-sky-soft: #dde9f5;   /* voice tints (backgrounds only) */
  --color-learn-rose-soft: #f5e0d5;
  /* One accent per module of a series (top edge of the cards, graphics only) */
  --color-learn-m1: #d4b56a;         /* champagne gold */
  --color-learn-m2: #8fb8de;         /* sky */
  --color-learn-m3: #d08f6e;         /* terracotta */

  /* Colour: sample-assignment films ("How I work"). Line drawings on the dark
     ocean stage: muted lines, gold for what the work adds and for the figure
     that stands for Saina, sky for shared content and changes, a soft orange
     for gaps and contradictions (graphics only, never text). */
  --color-film-stage: var(--color-blue-deep);
  --color-film-line: #c3d0de;
  --color-film-shared: #8fb8de;
  --color-film-gap: #e8955a;

  /* Colour: on dark */
  --color-on-dark: #fbf8f1;
  --color-on-dark-muted: #c3d0de; /* 9.3:1 on --color-blue-deep */
  --color-line-on-dark: rgba(212, 181, 106, 0.35);

  /* Typography */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  /* Heading sizes, 6 pt (0.5rem) smaller than before so long German words
     fit the layout; --text-2xl stays at least --text-xl to keep h3 above h4. */
  --text-2xl: clamp(1.5rem, 0.9rem + 1.4vw, 1.75rem);
  --text-3xl: clamp(1.75rem, 1.1rem + 2.8vw, 3rem);
  --text-display: clamp(2.75rem, 1.8rem + 4.4vw, 5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.65;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: clamp(4.5rem, 3rem + 6vw, 8rem);

  /* Layout */
  --width-content: 72rem;
  --width-prose: 40rem;
  --radius: 0.375rem;
  --header-height: 4.25rem;
  --pins-height: 2.75rem;        /* contact pins hanging below the header */
  --subnav-height: 3rem;         /* sticky sub-navigation of "How I work" (measured by JS) */
}