/*
  Design tokens, mirrored from the Figma library (file RJKwNvcYOV58r1JGLeJmVi, page "02 / Design system").
  Audited against the local variables and styles on 2026-10-23. Figma is the source of truth: every token here
  is a Figma variable or style. One deliberate difference: Dark foreground-subtle (see its comment).

  Naming: the Figma variable name with "/" turned into "-".
  1. Drue / Primitive (Light, Dark)   -> --color-<name>   (prefixed so "background" can't clash with background/*)
  2. Drue / Semantic - Color          -> --text-*, --background-*, --border-*, --accent-*, --status-*, --decorative-*, --effect-*-color
  3. Drue / Foundation                -> --spacing-*, --radius-*, --border-1|2, --container-*, --font-*, --type-*, --size-*, --effect-shadow-*
  4. Effect styles                    -> --effect-elevation-modal (Elevation/Modal)

  Rules
  - Components use the semantic roles (section 2), never primitives. Dark mode swaps primitives, plus the
    few semantic roles whose Dark value differs in Figma.
  - Figma's font/style variables are style names ("SemiBold"); here they are the matching CSS weights.
  - Not mirrored: the type paragraph-spacing variables (every one is 0).
*/

:root {
  color-scheme: light dark;

  /* ---------- 1. Drue / Primitive, Light ---------- */
  --color-background: #fbfbfb;
  --color-surface: #f2f2f2;
  --color-foreground: #191919;
  --color-foreground-subtle: #666666;
  --color-foreground-faint: #e6e6e2;
  --color-overlay: #00000080;
  --color-shadow: #0000001a;
  --color-accent-purple: #472e83;
  --color-accent-white: #ffffff;
  --color-accent-black: #191919;
  --color-accent-red: #a5323f;
  --color-accent-green: #337545;
  --color-accent-pink: #982969;
  --color-accent-orange: #c47716;
  --color-accent-lime: #adbd4e;
  --color-accent-lavender: #c1a8d8;
  --color-accent-mint: #a3d6c3;
  --color-accent-blue: #4760df;
  --color-decorative-gold: #edd656;
  --color-decorative-sky: #97daf8;
  --color-decorative-mint: #a2d8c9;
  --color-decorative-lime: #bcd85f;
  --color-decorative-yellow: #fffac2;
  --color-decorative-orange: #ffc8a0;
  --color-decorative-coral: #f7acc0;
  --color-decorative-lavender: #ede3f0;
  /* decorative-red is accent-red at 10% in both modes */
  --color-decorative-red: color-mix(in srgb, var(--color-accent-red) 10%, transparent);

  /* ---------- 2. Drue / Semantic - Color ---------- */
  --text-primary: var(--color-foreground);
  --text-secondary: var(--color-foreground-subtle);
  --text-link: var(--color-accent-purple);
  --text-on-accent: var(--color-accent-white);
  --background-page: var(--color-background);
  --background-surface: var(--color-surface);
  --background-overlay: var(--color-overlay);
  --border-border: var(--color-foreground-subtle);
  --border-border-subtle: var(--color-foreground-faint);
  --border-border-decorative: var(--color-accent-purple);
  --border-border-focus: var(--color-accent-purple);
  --accent-purple: var(--color-accent-purple);
  --accent-secondary: var(--color-accent-pink);
  --accent-blue: var(--color-accent-blue);
  --accent-violet: var(--color-accent-lavender);
  --accent-teal: var(--color-accent-mint);
  --accent-green: var(--color-accent-lime);
  --accent-red: var(--color-accent-red);
  --accent-pink: var(--color-accent-pink);
  --accent-gold: var(--color-decorative-gold);
  --accent-orange: var(--color-accent-orange);
  --status-success: var(--color-accent-green);
  --status-error: var(--color-accent-red);
  --decorative-sky: var(--color-decorative-sky);
  --decorative-mint: var(--color-decorative-mint);
  --decorative-lime: var(--color-decorative-lime);
  --decorative-yellow: var(--color-decorative-yellow);
  --decorative-orange: var(--color-decorative-orange);
  --decorative-coral: var(--color-decorative-coral);
  --decorative-lavender: var(--color-decorative-lavender);
  --decorative-red: var(--color-decorative-red);
  --effect-image-shadow-color: #0000001a;
  --effect-modal-shadow-color: #0000001a;

  /* ---------- 3. Drue / Foundation ---------- */

  /* Spacing */
  --spacing-0: 0px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-96: 96px;
  --spacing-144: 144px;

  /* Radius */
  --radius-0: 0px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-24: 24px;
  --radius-72: 72px;

  /* Border weight */
  --border-1: 1px;
  --border-2: 2px;

  /* Opacity, 0-100: use calc(var(--opacity-disabled) / 100) */
  --opacity-disabled: 44;

  /* Containers */
  --container-small: 360px;
  --container-medium: 720px;
  --container-large: 1120px;
  --container-xlarge: 1440px;

  /* Fonts. The generic tail of each stack is a load fallback, not from Figma. */
  --font-display-1-family: "Grenze", serif;
  --font-display-0-family: "Source Serif 4", serif;
  --font-heading-family: "Grenze", serif;
  --font-body-family: "Source Serif 4", serif;
  --font-nav-family: "Source Serif 4", serif;
  /* Weights: Figma's Regular, Medium and SemiBold, set a step lighter than 400/500/600 (Drue, 2026-10-28: the
     browser drew them heavier than Figma). Both families are variable, so any value between steps works. */
  --font-style-regular: 370;
  --font-style-medium: 450;
  --font-style-semibold: 550;
  --font-style-italic: italic;

  /* Type roles: size / line-height / tracking. Families and weights are in the Figma text styles:
     display-1 and h1 Grenze Regular; h2 Grenze Medium; h3 Source Serif SemiBold (h3-card: Grenze Regular);
     h4, labels and button Source Serif SemiBold; everything else Source Serif Regular. */
  --type-display-1-size: 64px; --type-display-1-line-height: 60px; --type-display-1-tracking: -1px;
  --type-display-0-size: 40px; --type-display-0-line-height: 55px; --type-display-0-tracking: -2px;
  --type-heading-h1-size: 64px; --type-heading-h1-line-height: 60px; --type-heading-h1-tracking: -2px;
  --type-heading-h2-size: 36px; --type-heading-h2-line-height: 38px; --type-heading-h2-tracking: 1px;
  --type-heading-h3-size: 30px; --type-heading-h3-line-height: 33px; --type-heading-h3-tracking: 0px;
  --type-heading-h4-size: 18px; --type-heading-h4-line-height: 30px; --type-heading-h4-tracking: 1px;
  --type-body-0-size: 16px; --type-body-0-line-height: 24px; --type-body-0-tracking: 0px;
  --type-body-1-size: 18px; --type-body-1-line-height: 26px; --type-body-1-tracking: 0px;
  --type-body-2-size: 20px; --type-body-2-line-height: 26px; --type-body-2-tracking: 1px;
  --type-caption-size: 14px; --type-caption-line-height: 21px; --type-caption-tracking: 0px;
  --type-label-0-size: 14px; --type-label-0-line-height: 16px; --type-label-0-tracking: 0px;
  --type-label-1-size: 16px; --type-label-1-line-height: 24px; --type-label-1-tracking: 1px;
  --type-label-2-size: 18px; --type-label-2-line-height: 30px; --type-label-2-tracking: 0px;
  --type-button-size: 16px; --type-button-line-height: 21px; --type-button-tracking: 0px;
  --type-nav-size: 18px; --type-nav-line-height: 25px; --type-nav-tracking: 1px;
  --type-link-size: 16px; --type-link-line-height: 22px; --type-link-tracking: 0px;

  /* Sizes */
  --size-icon: 24px;
  --size-status-icon: 40px;
  --size-button-height: 44px;
  --size-work-link-width: 124px;
  --size-work-link-height: 51px;
  --size-navigation-item-height: 44px;
  --size-navigation-work-width: 41px;
  --size-navigation-about-width: 47px;
  --size-navigation-beyond-work-width: 101px;
  --size-navigation-resume-width: 61px;
  --size-navigation-template-width: 121.3333px;
  --size-navigation-template-height: 44px;
  --size-input-single-line-height: 48px;
  --size-input-multiline-width: 320px;
  --size-input-multiline-min-height: 120px;

  /* Shadow parts (effect/shadow-0 and effect/shadow-1) */
  --effect-shadow-0-position-x: 0px; --effect-shadow-0-position-y: 0px; --effect-shadow-0-blur: 2px; --effect-shadow-0-spread: 0px;
  --effect-shadow-1-position-x: 0px; --effect-shadow-1-position-y: 4px; --effect-shadow-1-blur: 8px; --effect-shadow-1-spread: 0px;

  /* ---------- 4. Effect styles ---------- */
  --effect-elevation-modal:
    var(--effect-shadow-0-position-x) var(--effect-shadow-0-position-y) var(--effect-shadow-0-blur) var(--effect-shadow-0-spread) var(--effect-modal-shadow-color),
    var(--effect-shadow-1-position-x) var(--effect-shadow-1-position-y) var(--effect-shadow-1-blur) var(--effect-shadow-1-spread) var(--effect-modal-shadow-color);
}

/* Browsers without color-mix(): tinted fills fall back to the surface color */
@supports not (color: color-mix(in srgb, red, blue)) {
  :root { --color-decorative-red: var(--color-surface); }
}

/* ---------- 1. Drue / Primitive, Dark ----------
   Follows the system preference. data-theme="dark" or "light" on <html> overrides it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background: #121212;
    --color-surface: #1c1c1c;
    --color-foreground: #f7f6f0;
    --color-foreground-subtle: #848484; /* Figma: #808080 (4.32:1 on surface); the nearest gray that passes AA */
    --color-foreground-faint: #2a2928;
    --color-overlay: #ffffff80;
    --color-shadow: #ffffff1a;
    --color-accent-purple: #d1b7ea;
    --color-accent-red: #ff7b85;
    --color-accent-green: #79cf93;
    --color-accent-pink: #f08cbc;
    --color-accent-orange: #f3ba6b;
    --color-accent-lime: #cfdb72;
    --color-accent-lavender: #d1b7ea;
    --color-accent-mint: #9edcc8;
    --color-accent-blue: #8ea2ff;
    --color-decorative-gold: #f3dd67;
    --color-decorative-sky: #397dea;
    --color-decorative-mint: #009c6c;
    --color-decorative-lime: #858d37;
    --color-decorative-yellow: #ffd540;
    --color-decorative-orange: #f58220;
    --color-decorative-coral: #f04e53;
    --color-decorative-lavender: #9d5d93;
    /* Semantic roles whose Dark value differs */
    --text-on-accent: var(--color-accent-black);
    --effect-image-shadow-color: #00000052;
    --effect-modal-shadow-color: #00000014;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-background: #121212;
  --color-surface: #1c1c1c;
  --color-foreground: #f7f6f0;
  --color-foreground-subtle: #848484; /* Figma: #808080 (4.32:1 on surface); the nearest gray that passes AA */
  --color-foreground-faint: #2a2928;
  --color-overlay: #ffffff80;
  --color-shadow: #ffffff1a;
  --color-accent-purple: #d1b7ea;
  --color-accent-red: #ff7b85;
  --color-accent-green: #79cf93;
  --color-accent-pink: #f08cbc;
  --color-accent-orange: #f3ba6b;
  --color-accent-lime: #cfdb72;
  --color-accent-lavender: #d1b7ea;
  --color-accent-mint: #9edcc8;
  --color-accent-blue: #8ea2ff;
  --color-decorative-gold: #f3dd67;
  --color-decorative-sky: #397dea;
  --color-decorative-mint: #009c6c;
  --color-decorative-lime: #858d37;
  --color-decorative-yellow: #ffd540;
  --color-decorative-orange: #f58220;
  --color-decorative-coral: #f04e53;
  --color-decorative-lavender: #9d5d93;
  --text-on-accent: var(--color-accent-black);
  --effect-image-shadow-color: #00000052;
  --effect-modal-shadow-color: #00000014;
}
:root[data-theme="light"] { color-scheme: light; }