/* ==========================================================================
   Lamont · LPs de Consórcio — Design tokens
   Identidade: verde-floresta + dourado (marca "moldura de porta").
   Ordem das camadas declarada uma única vez, aqui.
   ========================================================================== */

@layer reset, tokens, base, ui, story, motion, page;

/* Fonte variável self-hosted (OFL). Subconjunto "latin" cobre todo o português. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Propriedades registradas: permitem animar/interpolar valores em gradientes e progressos. */
@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --door {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@layer tokens {
  :root {
    /* ---------- Tier 1 · paleta da marca ---------- */
    --forest-950: #07170c;
    --forest-900: #0c2212;
    --forest-800: #13371a; /* verde Lamont */
    --forest-700: #1a4a25;
    --forest-600: #236032;
    --forest-500: #2f7d44;
    --forest-300: #8fbf9b;
    --forest-200: #bfdcc6;
    --forest-100: #e1eee4;

    --mist-50: #f7f9f5; /* neutro esverdeado (não creme) */
    --mist-100: #eef3eb;
    --mist-200: #dde7da;
    --mist-300: #c5d4c1;

    --gold-700: #8a6a05; /* texto dourado sobre claro (AA) */
    --gold-600: #b98e0c;
    --gold-500: #e8ba22; /* dourado Lamont */
    --gold-400: #f0cb4e;
    --gold-300: #f6dd8d;
    --gold-200: #faebb9;
    --gold-100: #fdf6dc;

    --ink-900: #0d2013;
    --ink-600: #425a49;
    --ink-500: #5a7061;

    /* ---------- Tier 2 · semânticos (tom claro = padrão) ---------- */
    --bg: var(--mist-50);
    --bg-2: var(--mist-100);
    --surface: #fff;
    --surface-2: var(--mist-100);
    --text: var(--ink-900);
    --text-2: var(--ink-600);
    --text-3: var(--ink-500);
    --line: rgb(13 32 19 / 0.1);
    --line-strong: rgb(13 32 19 / 0.2);
    --accent: var(--gold-500);
    --accent-ink: var(--forest-900);
    --accent-text: var(--gold-700);
    --brand: var(--forest-800);
    --focus: var(--forest-600);
    --ico: var(--forest-800);
    --ico-accent: var(--gold-500);
    --ico-ink: var(--forest-900);
    --ico-bg: #fff;
    --glow: 232 186 34;

    /* ---------- Tipografia ---------- */
    --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --fs-xs: 0.8125rem;
    --fs-sm: 0.9375rem;
    --fs-md: 1rem;
    --fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    --fs-h2: clamp(1.95rem, 1.35rem + 2.6vw, 3.25rem);
    --fs-h1: clamp(2.35rem, 1.2rem + 4.4vw, 4.6rem);

    /* ---------- Espaço, raios, sombras ---------- */
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --container: 75rem;
    --section-y: clamp(4.5rem, 2.5rem + 7vw, 8.5rem);
    --r-sm: 0.75rem;
    --r-md: 1.125rem;
    --r-lg: 1.75rem; /* casca do card (double-bezel) */
    --r-xl: 2.25rem;
    --r-pill: 999px;
    --bezel: 0.375rem; /* espessura da casca */

    --shadow-1: 0 1px 2px rgb(7 23 12 / 0.06), 0 12px 28px -14px rgb(7 23 12 / 0.22);
    --shadow-2: 0 2px 4px rgb(7 23 12 / 0.05), 0 28px 56px -26px rgb(7 23 12 / 0.4);
    --shadow-gold: 0 14px 34px -12px rgb(232 186 34 / 0.6);

    /* ---------- Movimento ---------- */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    /* mola suave (~8% de overshoot, ~680 ms) */
    --ease-spring: linear(0, 0.05 3.6%, 0.171 7.1%, 0.328 10.7%, 0.494 14.3%, 0.65 17.9%, 0.785 21.4%, 0.894 25%, 0.975 28.6%, 1.03 32.1%, 1.064 35.7%, 1.08 39.3%, 1.083 42.9%, 1.078 46.4%, 1.067 50%, 1.053 53.6%, 1.039 57.1%, 1.027 60.7%, 1.016 64.3%, 1.007 67.9%, 1.001 71.4%, 0.997 75%, 0.994 78.6%, 0.993 82.1%, 0.993 85.7%, 0.994 89.3%, 0.995 92.9%, 0.996 96.4%, 1);

    /* ---------- Camadas z (sistêmicas) ---------- */
    --z-nav: 40;
    --z-dock: 45;
    --z-consent: 50;
  }

  /* ---------- Tons de seção ---------- */
  [data-tone="dark"] {
    color-scheme: dark;
    --bg: var(--forest-800);
    --bg-2: var(--forest-900);
    --surface: rgb(255 255 255 / 0.05);
    --surface-2: rgb(255 255 255 / 0.09);
    --text: #f4f7f1;
    --text-2: rgb(244 247 241 / 0.74);
    --text-3: rgb(244 247 241 / 0.6);
    --line: rgb(255 255 255 / 0.12);
    --line-strong: rgb(255 255 255 / 0.24);
    --accent-text: var(--gold-400);
    --brand: var(--gold-500);
    --focus: var(--gold-400);
    --ico: #f4f7f1;
    --ico-accent: var(--gold-500);
    --ico-bg: #214a2b;
  }

  [data-tone="night"] {
    color-scheme: dark;
    --bg: var(--forest-900);
    --bg-2: var(--forest-950);
    --surface: rgb(255 255 255 / 0.045);
    --surface-2: rgb(255 255 255 / 0.08);
    --text: #f4f7f1;
    --text-2: rgb(244 247 241 / 0.74);
    --text-3: rgb(244 247 241 / 0.6);
    --line: rgb(255 255 255 / 0.11);
    --line-strong: rgb(255 255 255 / 0.22);
    --accent-text: var(--gold-400);
    --brand: var(--gold-500);
    --focus: var(--gold-400);
    --ico: #f4f7f1;
    --ico-accent: var(--gold-500);
    --ico-bg: #163520;
  }

  [data-tone="gold"] {
    --bg: var(--gold-500);
    --bg-2: var(--gold-400);
    --surface: rgb(255 255 255 / 0.42);
    --surface-2: rgb(255 255 255 / 0.6);
    --text: var(--forest-900);
    --text-2: #2d3d1f;
    --text-3: #3d4b2c;
    --line: rgb(12 34 18 / 0.18);
    --line-strong: rgb(12 34 18 / 0.34);
    --accent: var(--forest-800);
    --accent-ink: var(--gold-400);
    --accent-text: var(--forest-900);
    --brand: var(--forest-800);
    --focus: var(--forest-900);
    --ico: var(--forest-900);
    --ico-accent: var(--forest-800);
    --ico-ink: var(--gold-300);
    --ico-bg: #fffdf3;
  }
}