/*
  Ceramigeek design tokens — the single source of truth for colour, type, spacing, motion and rhythm.
  Page and component files reference these custom properties and must never hard-code literal values.

  IDENTITY
  --------
  Ceramigeek is BLACK, WHITE and RED. That comes straight from the owner's own artwork: the mascot is
  solid black with a white muzzle, the wordmark is black "CERAMI" + red "GEEK", and the footer ornament
  is black-and-red ribbons. Porcelain neutrals exist only to carry photography — they are supporting
  surfaces, never the brand colour. (The previous beige/wine palette has been removed: beige dominance
  made the site read as a generic handmade-craft template instead of Ceramigeek.)

  Two grounds carry the whole site:
    - PAPER (near-white)  — reading, catalog, forms, account.
    - INK   (near-black)  — hero, manifesto, archive, footer, anything meant to feel like a brand moment.
  Sections alternate between them. Red is reserved for action and for the maker's mark; it is never a
  background wash.

  The small "colored porcelain" accents are sampled from Nathy's real glazes (celadon, denim ground,
  bone, olive, ember, gold). They tint labels and archive marks at small sizes only.
*/
:root {
    /* ---- Brand primitives -------------------------------------------------- */
    --cg-black: #100e0e;              /* branded black ground / mascot */
    --cg-ink: #1a1614;                /* body text on paper (near-black, warm) */
    --cg-white: #ffffff;
    --cg-paper: #faf8f5;              /* bright warm white — the light ground (NOT beige) */
    --cg-porcelain: #f1eeea;          /* supporting neutral surface */
    --cg-surface: #ffffff;            /* elevated content surface */
    --cg-red: #d30019;                /* Ceramigeek primary red (the "GEEK" in the wordmark) */
    --cg-red-deep: #bc2231;           /* the deeper red sampled from the brand artwork */
    --cg-red-hover: #a80014;          /* red hover/active on light */
    --cg-red-on-dark: #ff3b4e;        /* red raised for legibility on the ink ground (AA on #100e0e) */
    --cg-muted: #6a615c;              /* muted text on paper */
    --cg-border: #e2ddd6;
    --cg-focus: #d30019;

    /* Colored-porcelain accents — sampled from the real glazed pieces. Small use only. */
    --clay-celadon: #9dc4b4;
    --clay-denim: #6b83a6;
    --clay-bone: #e6dcc8;
    --clay-olive: #7d8348;
    --clay-ember: #e0703a;
    --clay-gold: #c2963f;

    /* ---- The kiln -----------------------------------------------------------
       The redesign's one metaphor: the page is a firing. Raw porcelain goes in, the heat rises as you
       read, a finished piece comes out. These colours carry the HEAT — the progress line under the
       header, the glow that follows the pointer on dark bands, the firing animation — as light and
       motion only, never as a background wash, so the brand itself stays black, white and red. */
    --kiln-raw: #e8e3db;          /* unfired porcelain */
    --kiln-bisque: #efd8c2;       /* after the first firing */
    --kiln-ember: #ff7a2f;        /* heat */
    --kiln-core: #ffd08a;         /* the hottest point */
    --kiln-glow: rgb(255 96 48 / 0.30);
    --kiln-glow-soft: rgb(255 96 48 / 0.10);
    --heat-gradient: linear-gradient(90deg, var(--cg-red) 0%, var(--kiln-ember) 72%, var(--kiln-core) 100%);

    /* Glass for the sticky header and floating controls. */
    --glass-paper: rgb(250 248 245 / 0.8);
    --glass-ink: rgb(16 14 14 / 0.74);
    --grain-opacity: 0.12;

    /* ---- Semantic colour (paper ground) ------------------------------------ */
    --color-bg: var(--cg-paper);
    --color-surface: var(--cg-surface);
    --color-surface-muted: var(--cg-porcelain);
    --color-surface-deep: var(--cg-black);
    --color-border: var(--cg-border);
    --color-border-strong: #cfc8bf;

    --color-ink: var(--cg-ink);
    --color-ink-strong: #14110f;
    --color-ink-muted: var(--cg-muted);
    --color-ink-soft: #948b85;
    --color-text-muted: var(--color-ink-muted);   /* alias the contact page used without a declaration */

    --color-accent: var(--cg-red);
    --color-accent-strong: var(--cg-red-hover);
    --color-accent-soft: #fae3e5;
    --color-on-accent: var(--cg-white);

    /* Retained aliases so existing components keep resolving. */
    --color-terracotta: var(--cg-red-deep);
    --color-gold: var(--clay-gold);
    --color-slate: #4a4340;

    /* ---- Semantic colour (ink ground) -------------------------------------- */
    --color-on-deep: #f4f0eb;
    --color-on-deep-strong: #ffffff;
    --color-on-deep-muted: #a79f99;
    --color-on-deep-border: rgba(244, 240, 235, 0.16);
    --color-accent-on-deep: var(--cg-red-on-dark);

    /* ---- States ------------------------------------------------------------ */
    --color-success: #2f7d4f;
    --color-success-soft: #dcebe0;
    --color-danger: #b3121f;
    --color-danger-soft: #f9dfe1;
    --color-info-soft: #eceae6;
    --color-focus: var(--cg-focus);
    --color-focus-ring: color-mix(in srgb, var(--cg-red) 48%, transparent);
    --focus-ring: 0 0 0 3px var(--color-focus-ring);

    /* ---- Typography --------------------------------------------------------
       ONE self-hosted family, Archivo (SIL OFL 1.1, declared in css/base/fonts.css), for the whole
       public site. The owner's rule that there is one typeface — "está uma letra de cada fonte"
       (PPT slides 1, 12–15) — still holds; what changed is which one. Segoe UI Variable exists only on
       Windows, so most visitors (iPhone, Android, Mac) never actually saw it. Archivo ships with the
       site, from this origin (font-src 'self'), so every visitor sees the same letters.

       The registers come from Archivo's WIDTH axis, not from a second family: display type is pushed
       wide and heavy (--stretch-display) so a headline has the mass of a finished piece; body copy
       stays at normal width. The system faces after "Archivo" only cover the moment of font swap.
       The three tokens stay separate so a future second face is still one line here. */
    --font-display: "Archivo", "Segoe UI Variable Display", "Segoe UI", -apple-system,
        BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-body: "Archivo", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont,
        "Helvetica Neue", Arial, sans-serif;
    --font-editorial: var(--font-body);

    --stretch-display: 112%;   /* headlines: wide and heavy */
    --stretch-label: 106%;     /* eyebrows, buttons, small uppercase labels */
    --stretch-body: 100%;

    /* Legacy aliases (older components still reference these). */
    --font-sans: var(--font-body);
    --font-serif: var(--font-editorial);

    /* Fluid type scale. The top end is deliberately large: editorial scale is what separates a brand
       site from a template, and it is the cheapest premium signal available. */
    --text-2xs: clamp(0.68rem, 0.66rem + 0.1vw, 0.74rem);
    --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.84rem);
    --text-sm: clamp(0.86rem, 0.83rem + 0.18vw, 0.95rem);
    --text-base: clamp(1rem, 0.97rem + 0.22vw, 1.09rem);
    --text-lg: clamp(1.12rem, 1.04rem + 0.42vw, 1.34rem);
    --text-xl: clamp(1.35rem, 1.16rem + 0.95vw, 1.85rem);
    --text-2xl: clamp(1.75rem, 1.36rem + 1.95vw, 2.7rem);
    --text-3xl: clamp(2.1rem, 1.45rem + 3.2vw, 4rem);
    --text-4xl: clamp(2.5rem, 1.5rem + 5vw, 5.8rem);
    --text-5xl: clamp(2.9rem, 1.35rem + 7.4vw, 8.2rem);
    --text-giant: clamp(2.5rem, 10.8vw, 15rem);   /* the footer wordmark: ten wide capitals across the page */

    --text-md: clamp(1.04rem, 0.99rem + 0.26vw, 1.16rem);   /* product names on a shelf */

    /* --leading-display and --leading-relaxed were referenced by the Academy page and never declared,
       so its headline silently fell back to the body's 1.6 and read as five separate lines. */
    --leading-display: 1;
    --leading-relaxed: 1.7;
    --leading-tight: 0.98;
    --leading-snug: 1.16;
    --leading-normal: 1.6;
    --leading-loose: 1.72;

    /* Tracking tightens as size grows — the standard editorial correction. */
    --tracking-display: -0.035em;
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.1em;
    --tracking-wider: 0.18em;
    --tracking-eyebrow: 0.22em;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 800;

    /* Comfortable reading measure. */
    --measure: 62ch;
    --measure-narrow: 46ch;
    --measure-wide: 74ch;

    /* ---- Spacing ----------------------------------------------------------- */
    --space-3xs: 0.125rem;
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 9rem;

    /* ---- Radius ------------------------------------------------------------
       Soft, like a piece that has been handled: a fired glaze never has a knife edge. Photographs sit
       in 16–26px frames; pills stay pills. */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 26px;
    --radius-2xl: 36px;
    --radius-pill: 999px;

    /* ---- Elevation ---------------------------------------------------------
       Used sparingly. Photography and ground contrast do the separating, not drop shadows. */
    --shadow-sm: 0 1px 2px rgba(20, 14, 12, 0.06);
    --shadow-md: 0 10px 30px rgba(20, 14, 12, 0.09);
    --shadow-lg: 0 28px 64px rgba(20, 14, 12, 0.16);
    --shadow-accent: 0 12px 30px color-mix(in srgb, var(--color-accent) 24%, transparent);

    /* ---- Layout ------------------------------------------------------------ */
    --container-max: 1240px;
    --container-wide: 1420px;
    --container-narrow: 760px;
    --container-pad: clamp(1.1rem, 0.6rem + 2.8vw, 3rem);
    --header-height: 4.9rem;
    --section-gap: clamp(3.5rem, 2rem + 7vw, 8rem);
    --section-gap-tight: clamp(2.25rem, 1.4rem + 4vw, 4.5rem);

    /* ---- Image aspect ratios ----------------------------------------------- */
    --ratio-square: 1 / 1;
    --ratio-piece: 3 / 4;        /* the product photographs are portrait */
    --ratio-portrait: 4 / 5;
    --ratio-tall: 2 / 3;
    --ratio-editorial: 3 / 2;
    --ratio-wide: 16 / 9;
    --ratio-banner: 21 / 9;

    /* ---- Motion ------------------------------------------------------------
       Restrained and fast. Motion supports content; it is never required to reach it. */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-instant: 90ms;
    --duration-fast: 160ms;
    --duration-base: 260ms;
    --duration-slow: 480ms;
    --duration-reveal: 900ms;
    --duration-intro: 1800ms;   /* the whole branded ident, start to finish */

    --transition-fast: var(--duration-fast) var(--ease-out);
    --transition-base: var(--duration-base) var(--ease-out);
    --transition-slow: var(--duration-slow) var(--ease-out);

    /* ---- Layers ------------------------------------------------------------ */
    --z-header: 100;
    --z-overlay: 200;
    --z-drawer: 250;
    --z-modal: 300;
    --z-toast: 400;
    --z-intro: 500;
}

/*
  Reduced motion collapses every duration to zero. Individual components additionally opt out of
  transform-based reveals so nothing depends on an animation having played.
*/
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-instant: 0ms;
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-slow: 0ms;
        --duration-reveal: 0ms;
        --duration-intro: 120ms;
        --transition-fast: 0ms linear;
        --transition-base: 0ms linear;
        --transition-slow: 0ms linear;
    }
}