/* TRES4CINCO — Brand Tokens — Single Source of Truth
 * Font files pending from Lola (Hoss + Cactus). Web-safe fallbacks active.
 * When fonts arrive: add @font-face blocks here and update --font-display / --font-body. */

@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@700&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');

:root {
  /* ── Color Palette (ONLY these five — do not invent new hues) ─── */
  --color-caoba:   #34271F;   /* Very dark warm brown — primary BG */
  --color-tabaco:  #B59E7D;   /* Warm khaki/tan — secondary surface */
  --color-oceano:  #28374A;   /* Dark navy — serious accent, use sparingly */
  --color-musgo:   #4C583E;   /* Forest/moss green — brand green */
  --color-lino:    #B1B09C;   /* Warm sage grey — light text on dark */

  /* Opacity variants (no new hues) */
  --color-caoba-90:  rgba(52, 39, 31, 0.90);
  --color-caoba-70:  rgba(52, 39, 31, 0.70);
  --color-caoba-40:  rgba(52, 39, 31, 0.40);
  --color-musgo-20:  rgba(76, 88, 62, 0.20);
  --color-lino-20:   rgba(177, 176, 156, 0.20);
  --color-lino-50:   rgba(177, 176, 156, 0.50);
  --color-oceano-80: rgba(40, 55, 74, 0.80);

  /* ── Typography ──────────────────────────────────────────────── */
  /* Hoss: bold slab serif — replace with @font-face when Lola delivers */
  --font-display: 'Zilla Slab', Georgia, serif;
  /* Cactus: old-style italic serif — replace with @font-face when Lola delivers */
  --font-body:    'Playfair Display', Georgia, serif;
  --font-ui:      system-ui, -apple-system, sans-serif;

  /* ── Type Scale (major third, ratio 1.250) ───────────────────── */
  --text-xs:   0.64rem;    /*  ~10px */
  --text-sm:   0.80rem;    /*  ~13px */
  --text-base: 1.00rem;    /*   16px */
  --text-lg:   1.25rem;    /*   20px */
  --text-xl:   1.563rem;   /*  ~25px */
  --text-2xl:  1.953rem;   /*  ~31px */
  --text-3xl:  2.441rem;   /*  ~39px */
  --text-4xl:  3.052rem;   /*  ~49px */
  --text-5xl:  3.815rem;   /*  ~61px */
  --text-6xl:  4.768rem;   /*  ~76px */

  /* ── Tracking & Leading ──────────────────────────────────────── */
  --tracking-tight:   -0.03em;
  --tracking-normal:   0em;
  --tracking-wide:     0.08em;
  --tracking-widest:   0.18em;
  --leading-tight:     1.1;
  --leading-snug:      1.3;
  --leading-normal:    1.55;
  --leading-relaxed:   1.72;

  /* ── Spacing Scale ───────────────────────────────────────────── */
  --space-1:   0.25rem;   /*   4px */
  --space-2:   0.5rem;    /*   8px */
  --space-3:   0.75rem;   /*  12px */
  --space-4:   1rem;      /*  16px */
  --space-5:   1.25rem;   /*  20px */
  --space-6:   1.5rem;    /*  24px */
  --space-8:   2rem;      /*  32px */
  --space-10:  2.5rem;    /*  40px */
  --space-12:  3rem;      /*  48px */
  --space-16:  4rem;      /*  64px */
  --space-20:  5rem;      /*  80px */
  --space-24:  6rem;      /*  96px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */

  /* Off-grid micro-spacing (premium polish — intentional breaks from the 8px grid) */
  --space-off-1: 0.375rem;   /*   6px */
  --space-off-2: 1.125rem;   /*  18px */
  --space-off-3: 2.75rem;    /*  44px */
  --space-off-4: 5.5rem;     /*  88px */

  /* ── Border Radius (use variety — at least 3 different values per page) ── */
  --radius-sm:   2px;
  --radius-md:   6px;
  --radius-lg:   14px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ── Shadow Stack (always layered, never single-shadow) ──────── */
  --shadow-card:
    0 1px 2px rgba(52, 39, 31, 0.30),
    0 4px 16px rgba(52, 39, 31, 0.40);
  --shadow-lifted:
    0 2px 6px rgba(52, 39, 31, 0.32),
    0 12px 40px rgba(52, 39, 31, 0.48);
  --shadow-modal:
    0 4px 12px rgba(52, 39, 31, 0.40),
    0 24px 64px rgba(52, 39, 31, 0.58);

  /* ── Layout ──────────────────────────────────────────────────── */
  --width-content: 72rem;   /* 1152px — text column */
  --width-wide:    90rem;   /* 1440px — design canvas */
  --width-narrow:  48rem;   /*  768px — focused reading */

  /* ── Z-index Scale ───────────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
}