/*
 * ============================================================
 * SANNASA — Design Tokens (CSS Custom Properties)
 * tokens.css — All CSS variables / brand tokens
 * ============================================================
 */

/* ── 1. BRAND TOKENS ──────────────────────────────────────── */
:root {
  /* Colors */
  --sannasa-pine-cone: #725d51;
  --sannasa-rodeo-dust: #c9a882;
  --sannasa-parchment: #f5ede0;
  --sannasa-parchment-dark: #e8d8c4;
  --sannasa-ink: #2c2420;
  --sannasa-ink-light: #5a4a42;
  --sannasa-pine-light: #9e8578;
  --sannasa-white: #ffffff;

  /* Typography — Font Families */
  --font-heading: "Object Sans", sans-serif; /* Primary: headings, display */
  --font-body: "Object Sans", sans-serif; /* Secondary: body text       */
  --font-ui: "Object Sans", sans-serif; /* Secondary: UI / labels     */

  /* Object Sans — Font Weight Tokens */
  --font-weight-regular: 400; /* ObjectSans-Regular        */
  --font-weight-regular-slant: 400; /* ObjectSans-Slanted (italic) */
  --font-weight-heavy: 800; /* ObjectSans-Heavy          */
  --font-weight-heavy-slant: 800; /* ObjectSans-HeavySlanted   */

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3rem;

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

  /* Layout */
  --content-width: 720px;
  --wide-width: 1200px;

  /* Borders & Radii */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --border-light: 1px solid var(--sannasa-parchment-dark);
  --border-accent: 2px solid var(--sannasa-rodeo-dust);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(44, 36, 32, 0.08);
  --shadow-md: 0 4px 12px rgba(44, 36, 32, 0.1);
  --shadow-lg: 0 10px 30px rgba(44, 36, 32, 0.12);
}

/* ── Responsive Token Overrides ───────────────────────────── */
@media (max-width: 768px) {
  :root {
    --text-4xl: 2.5rem;
    --text-3xl: 2rem;
    --text-2xl: 1.75rem;
    --text-xl: 1.375rem;
  }
}

@media (max-width: 480px) {
  :root {
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
  }
}