/* ============================================================
   CASUALIZZE — Color tokens
   Monochromatic system (Brand Book v5). No accent color.
   Color enters ONLY through photography (the garment itself).
   Personality lives in voice, type, scale and movement.
   ============================================================ */

:root {
  /* --- Base palette (the neutral spine) --- */
  --c-ink:        #121212; /* quase-preto — text, logo, titles. NOT #000 on screen */
  --c-grey:       #8A8B86; /* cinza — support text, lines, captions */
  --c-paper:      #FBFCF9; /* off-white — the "paper" of every layout */
  --c-white:      #FFFFFF; /* studio white — product cut-outs, cards */

  /* --- Derived neutral steps (built from the spine, not invented) --- */
  --c-ink-700:    #2C2C2B; /* pressed / deep hover on ink surfaces */
  --c-ink-500:    #5B5C58; /* muted ink for secondary headings */
  --c-grey-400:   #A9AAA5; /* disabled text, faint labels */
  --c-grey-200:   #C9CAC4; /* hairline borders on paper */
  --c-paper-200:  #F1F3ED; /* dim paper — striped rows, hover wash */
  --c-paper-300:  #E8EAE2; /* card sunken / skeleton */

  /* --- Alpha lines (sit cleanly on any photo or surface) --- */
  --c-line:        rgba(18, 18, 18, 0.12);
  --c-line-strong: rgba(18, 18, 18, 0.22);
  --c-line-light:  rgba(238, 240, 234, 0.22); /* hairlines on ink */
  --c-veil:        rgba(18, 18, 18, 0.55);     /* image protection scrim */

  /* --- Functional cues (kept neutral — never a brand color) ---
     The system stays monochrome; status is read through tone + type,
     so even "in stock / sold out" resolve in ink & grey. */
  --c-positive:   #3F6E50; /* discreet confirmation only (toast tick) */
  --c-attention:  #8A6A2F; /* low-stock note, sparingly */

  /* ============================================================
     Semantic aliases — reference these in components, not raw hex
     ============================================================ */

  /* Text */
  --text-primary:   var(--c-ink);
  --text-secondary: var(--c-grey);
  --text-muted:     var(--c-grey-400);
  --text-inverse:   var(--c-paper);

  /* Surfaces */
  --surface-page:    var(--c-white);   /* fundo geral = branco */
  --surface-card:    var(--c-white);
  --surface-sunken:  var(--c-paper);   /* cinza claro p/ seções / sunken / wash */
  --surface-muted:   var(--c-paper-200); /* cinza um passo mais fundo */
  --surface-inverse: var(--c-ink);

  /* Borders */
  --border-subtle: var(--c-line);
  --border-strong: var(--c-line-strong);
  --border-inverse: var(--c-line-light);

  /* Call to action — resolved by contrast & type, never a hue.
     Solid ink with paper text, or the inverse. (Oysho / Zara logic) */
  --cta-fill:        var(--c-ink);
  --cta-text:        var(--c-paper);
  --cta-fill-hover:  var(--c-ink-700);
  --cta-fill-press:  #000000;

  /* Image scrim for legible type over photography */
  --scrim: linear-gradient(180deg, rgba(18,18,18,0) 35%, rgba(18,18,18,0.62) 100%); /* @kind other */

  /* ============================================================
     Accent — Verde-Lagoa (official, jun/2026)
     The single permitted hue in an otherwise monochrome system.
     Used at ~10% max: active nav, text links, a pontual CTA,
     progress/selo — never a large background fill. Carioca green
     (Lagoa/floresta); harmonises with the petróleo of the garments.
     ============================================================ */
  --c-accent:       #1C6B57; /* verde-lagoa */
  --c-accent-700:   #155544; /* hover/press (deeper) */
  --c-accent-100:   #E6F0EC; /* faint wash (selo bg, hover row, wipe) */
  --accent:          var(--c-accent);
  --accent-hover:    var(--c-accent-700);
  --accent-contrast: var(--c-white); /* text/icon on accent fill */
  --accent-wash:     var(--c-accent-100);
}