/* ==========================================================================
   Samira Classen — design tokens
   Source: Figma "Samira Classen" (0yFaZMSD1SGu2fEVTUXSij), page "Desktop",
   frames Home 244:330, Über mich 305:633, Kontakt 285:2549, the four service
   pages 435:10/254/498/742. The file defines no styles or variables; every
   value below was measured from the layers (see DESIGN.md).

   Loads after the theme's main.css and redefines every colour role it
   declares. A colour exists in this file and nowhere else.
   ========================================================================== */

:root {
    /* ---- Palette (primitives) — never read these from a component ---- */
    --sc-paper: #f7f6f6;    /* page ground, every section */
    --sc-sand: #e8e4e1;     /* quote, CTA panel, intro band, situation cards, footer */
    --sc-blush: #e0d7d4;    /* the four audience cards on Home only */
    --sc-graphite: #30302f; /* all text, rules, the field underline */
    --sc-slate: #30363e;    /* the dark footer (Kontakt) and the "Color examples" boards */
    --sc-white: #ffffff;    /* text on slate */

    /* ---- Colour roles the theme reads (main.css contract) ---- */
    --canvas: var(--sc-paper);
    --ink: var(--sc-graphite);
    --on-ink: var(--sc-paper);
    /* The design has no filled button: every action is a text link with an
       arrow. The accent role is therefore ink, so anything the theme fills
       (Woo, a submit) stays inside the palette. */
    --accent: var(--sc-graphite);
    --accent-hover: #4b4b49;                 /* 8.1:1 on paper — still an edge in hover */
    --accent-edge: var(--sc-graphite);
    --on-accent: var(--sc-paper);
    --text-2: #585857;                       /* meta only; 6.6 / 5.6 / 5.0:1 on paper, sand, blush */
    --line: #dbdad8;                         /* decorative hairline, as rendered in Figma */
    --surface: var(--sc-sand);
    --plate: var(--sc-sand);
    --error: #a3241a;                        /* not in the design; 6.9:1 on paper */

    /* Surfaces by name, so a module picks a ground without a hex */
    --surface-sand: var(--sc-sand);
    --surface-blush: var(--sc-blush);
    --surface-slate: var(--sc-slate);

    /* Decorative grid behind the situation cards (#b3b3b3 at 30% in Figma) */
    --grid-line: rgb(179 179 179 / .3);
    --grid-cell: 47px;
    /* Scrim on the full-bleed photo band behind the text panel (#000 at 20%) */
    --scrim: rgb(0 0 0 / .2);

    /* ---- Type ---- */
    --font-display: "Libre Caslon Display", "Times New Roman", Georgia, serif;
    --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Sizes are the 1440 Figma values at the top of the clamp. There is no
       mobile design; the floors are ours (DESIGN.md, open decisions). */
    --fs-wordmark: 12.2cqi;  /* footer "SAMIRA CLASSEN": 166px on the 1360 content width, measured to fill it */
    --fs-h1: clamp(2.125rem, 1.68rem + 1.9vw, 3.375rem); /* 34 → 54, uppercase hero */
    --fs-h2: clamp(1.75rem, 1.55rem + .78vw, 2.25rem);   /* 28 → 36 */
    --fs-h3: clamp(1.3125rem, 1.25rem + .28vw, 1.5rem);  /* 21 → 24, card and footer titles */
    --fs-quote: clamp(1.25rem, 1.16rem + .38vw, 1.5rem); /* 20 → 24 */
    --fs-brand: 1.125rem;   /* 18, header wordmark, uppercase */
    --fs-tagline: 1rem;     /* 16, "MEDIENTRAINERIN", display face, uppercase */
    --fs-body: 1rem;        /* 16 */
    --fs-small: .8125rem;   /* 13, nav, kicker, consent text */

    --fw-light: 300;        /* nav links, kicker, "WIEN" */
    --fw-regular: 400;
    --fw-medium: 500;       /* emphasis inside body copy */

    /* Figma "auto" line height for each face, measured on single lines */
    --lh-display: 1.22;     /* Libre Caslon Display */
    --lh-h1: 1.24;          /* the 54px title: 67px in Figma */
    --lh-tight: 1.05;       /* the quote and the long H2s on the service pages */
    --lh-text: 1.21;        /* Inter */
    --lh-list: 1.42;        /* footer contact lines, 22.75px on 16 */

    /* ---- Space — the steps the auto-layouts use ---- */
    --space-3xs: 3px;       /* label ↔ chevron */
    --space-2xs: 5px;
    --space-xs: 10px;       /* the default stack gap */
    --space-s: 15px;
    --space-m: 20px;        /* card padding, card gap */
    --space-l: 30px;
    --space-xl: 40px;       /* desktop gutter, header gap */
    --space-3xl: 100px;     /* the tall bottom padding inside cards */

    /* ---- Fluid steps ------------------------------------------------------
       Linear from 375 to 1440 px, the Figma value at the top. Containers read
       these, so .wrap, .section and .panel are right at every width without a
       media query of their own. */
    --space-2xl: clamp(30px, 1.435rem + 1.878vw, 50px); /* panel padding: 30 → 50 */
    --gutter: clamp(20px, .81rem + 1.878vw, 40px);      /* .wrap inline padding: 20 → 40 */
    --section: clamp(32px, 1.604rem + 1.69vw, 50px);    /* vertical rhythm between bands: 32 → 50 */

    /* ---- Layout ---- */
    --content-max-width: 1440px;   /* the Figma frame; .wrap adds the gutter inside it */
    --header-h: 91px;
    --split: minmax(0, 751fr) minmax(0, 609fr); /* text | content column, as on every page */
    --measure: 36rem;              /* left-column paragraph width */

    /* ---- Edges ---- */
    --hairline: .5px;      /* nav divider, footer rule, panel border */
    --rule: 1px;           /* functional edges: field underline, checkbox */
    --radius: 0;           /* the design has no rounded corner anywhere */

    --t: .2s cubic-bezier(.4, 0, .2, 1);

    /* Motion (site.css, "Motion"): one easing, a long settle */
    --ease-out: cubic-bezier(.2, .7, .1, 1);
    --reveal-distance: 24px;
}

/* ---- Slate tone ---------------------------------------------------------
   The Kontakt footer and the "Color examples" boards put the quote, the CTA
   panel and the footer on slate. Any band takes it with .tone-slate; the
   roles flip, so the components inside need no second set of rules. */
.tone-slate {
    --canvas: var(--sc-slate);
    --surface: var(--sc-slate);
    --ink: var(--sc-white);
    --on-ink: var(--sc-slate);
    --accent: var(--sc-white);
    --accent-hover: var(--sc-paper);
    --accent-edge: var(--sc-white);
    --on-accent: var(--sc-slate);
    --text-2: #c9ccd0;                       /* 7.6:1 on slate */
    --line: rgb(255 255 255 / .25);
    background-color: var(--canvas);
    color: var(--ink);
}