/*
 * ============================================================================
 * SOGLIA GRID — hub subset (vanilla CSS)
 *
 * A slim, framework-free token layer for the Bottega Soglia hub site.
 * NOT the full design system: `soglia-grid/implementation.css` is the
 * Tailwind v4 build consumed by Prova. This file carries only what a
 * one-page static site needs, under the same `--sg-` prefix.
 *
 * Core palette: RED / WHITE / BLACK.
 * Sage is retained as a global token and used here for the "live" semantic.
 * Blossom (rose) is part of the v1.1 global palette but its step values are
 * not yet recorded anywhere — see README before adding it.
 *
 * All light/dark switching happens here, on the --sg- layer. Consumers map
 * their local names to these once and never branch again.
 * ============================================================================ */

:root {
  /* --- Ground & ink ------------------------------------------------------ */
  --sg-paper: #FCFBF9;         /* white ground (warm) */
  --sg-paper-2: #F5F3EE;
  --sg-ink: #17140F;           /* black ink (warm) */
  --sg-ink-soft: #46443F;
  --sg-stone: #8B877E;

  /* --- Rules ------------------------------------------------------------- */
  --sg-line: #EAE8E1;
  --sg-line-strong: #D6D3CA;

  /* --- Brand red — the one bet. Mark, hero emphasis, interaction only. --- */
  --sg-red: #C8102E;           /* 600 */
  --sg-red-hover: #9E0B22;     /* 700 */

  /* --- Retained global tokens -------------------------------------------- */
  --sg-sage: #66795B;          /* "live" semantic */
  --sg-soon: #A6A299;          /* "in development" semantic */

  /* --- Type -------------------------------------------------------------- */
  /* Placeholder system stack. The display face is a later swap and MUST be
   * self-hosted — no CDN. See README. */
  --sg-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sg-font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;

  /* --- Geometry & motion ------------------------------------------------- */
  --sg-radius: 0;              /* sharp corners, always */
  --sg-maxw: 80rem;
  --sg-ease: cubic-bezier(0.2, 1, 0.32, 1);

  color-scheme: light;
}

/* Dark — system preference */
@media (prefers-color-scheme: dark) {
  :root {
    --sg-paper: #121110;
    --sg-paper-2: #1A1916;
    --sg-ink: #F1EFE9;
    --sg-ink-soft: #C9C6BD;
    --sg-stone: #918D84;
    --sg-line: #262420;
    --sg-line-strong: #37342D;
    --sg-red: #EE3B52;
    --sg-red-hover: #F4586C;
    --sg-sage: #8FA681;
    --sg-soon: #756F66;
    color-scheme: dark;
  }
}

/* Dark — explicit override (theme toggle). Must win over the media query
 * in both directions, so light is restated rather than left to cascade. */
:root[data-theme="light"] {
  --sg-paper: #FCFBF9;
  --sg-paper-2: #F5F3EE;
  --sg-ink: #17140F;
  --sg-ink-soft: #46443F;
  --sg-stone: #8B877E;
  --sg-line: #EAE8E1;
  --sg-line-strong: #D6D3CA;
  --sg-red: #C8102E;
  --sg-red-hover: #9E0B22;
  --sg-sage: #66795B;
  --sg-soon: #A6A299;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --sg-paper: #121110;
  --sg-paper-2: #1A1916;
  --sg-ink: #F1EFE9;
  --sg-ink-soft: #C9C6BD;
  --sg-stone: #918D84;
  --sg-line: #262420;
  --sg-line-strong: #37342D;
  --sg-red: #EE3B52;
  --sg-red-hover: #F4586C;
  --sg-sage: #8FA681;
  --sg-soon: #756F66;
  color-scheme: dark;
}