/*
Theme Name:   ROAM
Theme URI:    https://roam-apparel.local
Description:  Custom child theme for ROAM — outdoor & everyday clothing. Built on Hello Elementor. Portfolio project.
Author:       Marcela Sutic
Author URI:   https://marcelasutic.com
Template:     hello-elementor
Version:      0.1.0
Text Domain:  roam
*/

/* ------------------------------------------------------------------ *
   ROAM — Design Tokens
   Single source of truth. Change a value here, the whole site follows.
 * ------------------------------------------------------------------ */
:root {
  /* --- Color: warm, honest, outdoor --- */
  --roam-ink:      #1a1d1b;   /* near-black, faint green undertone (text) */
  --roam-paper:    #f6f4ef;   /* warm off-white (page background)         */
  --roam-stone:    #e4e0d7;   /* muted sand (cards, borders)              */
  --roam-fog:      #9a978f;   /* muted grey-taupe (secondary text)        */
  --roam-pine:     #2f4a3a;   /* deep forest green (brand)                */
  --roam-signal:   #d1502e;   /* warm rust/orange (CTAs, accents)         */
  --roam-white:    #ffffff;

  /* --- Semantic aliases (use these in components) --- */
  --color-bg:        var(--roam-paper);
  --color-surface:   var(--roam-white);
  --color-text:      var(--roam-ink);
  --color-muted:     var(--roam-fog);
  --color-line:      var(--roam-stone);
  --color-brand:     var(--roam-pine);
  --color-accent:    var(--roam-signal);

  /* --- Type --- */
  --font-display: "Archivo", system-ui, sans-serif;   /* sturdy grotesk headings */
  --font-body:    "Inter", system-ui, sans-serif;      /* clean body              */

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.25rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2vw, 3.25rem);
  --step-4:  clamp(2.75rem, 2rem + 3.75vw, 5rem);

  --leading-tight: 1.1;
  --leading-body:  1.6;
  --tracking-label: 0.08em;

  /* --- Space & layout --- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;
  --container: 1280px;
  --gutter: clamp(1rem, 4vw, 3rem);

  /* --- Motion & form --- */
  --radius: 2px;                 /* deliberately sharp/utilitarian */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.4s;
}

/* ------------------------------------------------------------------ *
   Base — lets the tokens do real work even before components exist
 * ------------------------------------------------------------------ */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

a { color: inherit; }

/* Utility: eyebrow / label text */
.roam-label {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}