/* ============================================================
   burak10x — THE DESIGN SYSTEM LAYER
   ============================================================

   Every design value in this site is declared here and nowhere else.
   `styles.css`, `roles.css`, `legal.css`, the catalogue's own
   `src/styles/design-system.css` and the components' scoped blocks all
   CONSUME these; none of them may declare a value of their own.

   Loaded before every other stylesheet by `src/layouts/Base.astro`, which
   both the public routes and the dev-only `/design-system/*` reference go
   through — so those pages document the same values the site renders with,
   by construction rather than by hand-copying.

   Two things deliberately absent:

   - BREAKPOINTS. Custom properties are invalid inside an `@media` condition,
     so a breakpoint cannot be a token. They stay literals at their point of
     use, which also matches the system's rule that each one is introduced by
     a component's own failure point rather than by a global scale.
   - `--accent`. Referenced with a fallback in five places and never defined,
     on purpose: defining it introduces a brand colour and breaks the One
     Green Rule. It is a seam, not an oversight.
   ============================================================ */

:root {
    /* ---------- colour ---------------------------------------
       A warm monochrome. Every neutral carries a warm cast, so
       nothing in the system reads as grey. */
    --bg:      #ece8e1;
    --bg-edge: #e7e3dc;  /* --bg as it reads UNDER the grain overlay — used for overscroll */
    --surface: #f4f1ec;
    --raised:  #ffffff;
    --ink:     #16130f;
    --muted:   rgba(22, 19, 15, 0.64);
    --faint:   rgba(22, 19, 15, 0.34);
    --line:    rgba(22, 19, 15, 0.14);
    --line-2:  rgba(22, 19, 15, 0.08);
    --invert-bg:  #16130f;
    --invert-ink: #f1ede6;

    /* The only chroma in the human-facing layer. It means "available" and
       nothing else — see the One Green Rule. */
    --status-available: #35a35f;

    /* terminal syntax palette — tuned for the DARK terminal bg (light theme).
       Scoped to `.terminal` at point of use; must never leak into the page. */
    --t-prompt: #5fd08a;
    --t-key:    #63d1e6;
    --t-head:   #ecbb6e;
    --t-link:   #8ab4f8;
    --t-tag:    #e58f6b;

    /* ---------- type ----------------------------------------
       Two faces, strictly divided: Space Grotesk speaks as a person,
       JetBrains Mono speaks as a machine. There is no third face. */
    --font-body:    "Space Grotesk", system-ui, sans-serif;
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, monospace;

    --w-regular: 400;
    --w-strong:  600;

    /* Space Grotesk tightens as it grows. */
    --f-display:    clamp(72px, 17vw, 280px);
    --f-display-lh: 0.86;
    --f-display-ls: -0.04em;
    --f-headline:    clamp(34px, 5vw, 62px);
    --f-headline-lh: 1;
    --f-headline-ls: -0.03em;
    --f-title:    clamp(22px, 2.7vw, 32px);
    --f-title-lh: 1.04;
    --f-title-ls: -0.025em;
    --f-lead:    clamp(20px, 2.4vw, 30px);
    --f-body:    17px;
    --f-body-lh: 1.5;
    --f-prose:   16px;   /* legal-page measure */
    --f-support: 15.5px; /* band notes, step prose */
    --f-note:    15px;   /* card descriptions, buttons */
    --f-compact: 14px;   /* hat prose, marquee, cta pill, terminal body */

    /* JetBrains Mono opens as it shrinks. */
    --f-mono:    13.5px;
    --f-mono-lh: 1.75;
    --f-mono-ls: 0.04em;
    --f-label:    13px;
    --f-label-ls: 0.14em;  /* the widest tracking in the system */
    --f-nav:     12.5px;
    --f-meta:    12px;
    --f-control: 11.5px;
    --f-micro:   11px;

    /* ---------- shape ---------------------------------------
       Pill-or-panel: interactive and inline → 100px; contains
       content → 16–22px. There is no 8px button and no 4px card. */
    --r-chip:    6px;
    --r-control: 13px;
    --r-panel:   16px;
    --r-surface: 20px;
    --r-modal:   22px;
    --r-pill:    100px;
    --r-circle:  50%;

    /* ---------- space --------------------------------------- */
    --sp-xs: 10px;
    --sp-sm: 14px;
    --sp-md: 18px;
    --sp-lg: 26px;
    --sp-xl: 40px;

    /* Layout constants. The gutter derives from the container so the
       wordmark aligns to the same left edge as every band below it. */
    --container: min(1180px, 92vw);
    --gutter:    max(16px, calc((100vw - min(1180px, 92vw)) / 2));
    --band:      clamp(90px, 12vh, 150px);
    --band-gap:  54px;  /* band head → its content */

    /* ---------- motion --------------------------------------
       The confidence of this system is in its slowness. */
    --ease:            cubic-bezier(0.22, 1, 0.36, 1);   /* the signature: fast out, long settle */
    --ease-io:         cubic-bezier(0.65, 0, 0.35, 1);   /* symmetric; looping ambients only */
    --ease-sweep:      cubic-bezier(0.33, 0, 0.2, 1);
    --ease-sweep-mask: cubic-bezier(0.33, 0, 0.15, 1);   /* differs from --ease-sweep so the
                                                            sweep's transitions finish out of sync */
    --d-quick:  0.25s;  /* chips, small controls, cursor morphs */
    --d-ink:    0.32s;  /* the .ink-fill rise — a named invariant of the system */
    --d-base:   0.4s;   /* card lifts, glow bars, arrows, row slides */
    --d-fill:   0.45s;  /* the fill-from-below wipe */
    --d-lift:   0.55s;
    --d-glide:  0.7s;
    --d-reveal: 0.8s;   /* scroll reveal, 0.08s per-item stagger via data-d */
    --d-settle: 0.9s;
    --d-long:   1.1s;
    --d-sweep:  1.25s;  /* sweep CTA mask travel */
    --d-theme:  540ms;  /* view-transition clip on theme toggle */
    --d-decode: 900ms;  /* hero name decode */
    --mq:       14s;    /* marquee cycle; also read by JS for the drag speed */

    /* ---------- depth ---------------------------------------
       This system is flat. Only the modal and the terminal cast a
       shadow; a third component that seems to need one belongs in
       the tonal ladder instead. */
    --shadow: 0 1px 0 rgba(22,19,15,0.05), 0 18px 40px -28px rgba(22,19,15,0.45);
    /* Layered over --shadow inside the terminal only. Derives from
       --invert-ink, so it follows the theme without a second value. */
    --shadow-console-inset: 0 1px 0 color-mix(in srgb, var(--invert-ink) 14%, transparent) inset;
    --grain:  0.04;

    /* ---------- layers -------------------------------------- */
    --z-label:      2;     /* .btn .lbl, above the button's ink wipe */
    --z-mobile-nav: 190;
    --z-nav:        200;
    --z-ds-nav:     210;   /* /design-system chrome; dev-only surface */
    --z-burger:     320;
    --z-modal:      9000;  /* language / currency overlay */
    --z-grain:      9998;
    --z-cursor:     9999;
}

/* The dark theme is a full inversion, not a filter: --ink and --bg swap
   roles, the alpha ramps re-derive from the new ink, and --invert-* swap so
   the terminal becomes a light panel on a dark page.

   Two values are deliberately NOT mirror images. --bg-edge reads LIGHTER
   than --bg because the grain switches from multiply to screen, and --faint
   drops to 30% rather than 34% because light-on-dark text holds more
   apparent weight at the same alpha. Do not tidy them into agreement. */
[data-theme="dark"] {
    --bg:      #0d0c0b;
    --bg-edge: #131210;
    --surface: #141210;
    --raised:  #1b1916;
    --ink:     #f1ede6;
    --muted:   rgba(241, 237, 230, 0.56);
    --faint:   rgba(241, 237, 230, 0.30);
    --line:    rgba(241, 237, 230, 0.15);
    --line-2:  rgba(241, 237, 230, 0.07);
    --invert-bg:  #f1ede6;
    --invert-ink: #16130f;

    /* terminal syntax palette — tuned for the LIGHT terminal bg (dark theme).
       The darker of the two sets: against a light console ground every one
       must clear 4.5:1, which four of the five light-theme hues do not. */
    --t-prompt: #157a3f;
    --t-key:    #0b7186;
    --t-head:   #965c0a;
    --t-link:   #2b5fc4;
    --t-tag:    #a8451c;

    --shadow: 0 1px 0 rgba(0,0,0,0.4), 0 24px 50px -30px rgba(0,0,0,0.8);
    --grain:  0.05;
}