/* ============================================================
   LOCA v2_gradient_editorial · tokens.css
   Color & gradient tokens · approved 2026-05-17
   ============================================================ */

/* ---------- BRAND GRADIENT — OXIDIZED 4-COLOR STACK ----------
   Direction: 135deg (CSS standard, top-left → bottom-right).
   Reads as: deep aubergine → wine magenta → antique copper → muted amber.
   Feel: oxidized metal / aged brass / editorial warmth.
   NOT: neon / social-media bright / saturated.

   IMPORTANT — Gradient is NOT decoration.
   Use only as a brand symbol or a single editorial accent.
   Maximum 1–2 gradient moments per page.
   ✅ Allowed: LOCA wordmark · 1 editorial hairline · rare key accent.
   ❌ Forbidden: card backgrounds · buttons · section backgrounds ·
      repeated UI containers · feature blocks · hover states. */
:root {
  --lo-color-aubergine:        #371646;  /* deep aubergine */
  --lo-color-wine-magenta:     #612042;  /* wine magenta */
  --lo-color-antique-copper:   #7E452A;  /* antique copper */
  --lo-color-muted-amber:      #967845;  /* muted amber */

  --lo-gradient-oxidized: linear-gradient(
    135deg,
    var(--lo-color-aubergine)       0%,
    var(--lo-color-wine-magenta)   38%,
    var(--lo-color-antique-copper) 70%,
    var(--lo-color-muted-amber)   100%
  );
}

/* ---------- DARK-MODE LIFTED GRADIENT ----------
   Same hue family, lifted ~25% in value for readability on
   #0d0e18 backgrounds. NOT a separate brand personality —
   only an optical adjustment for visibility on dark.
   Use for: LOCA wordmark when placed on editorial dark blocks
   or social-share OG image. */
:root {
  --lo-color-aubergine-lifted:      #503060;
  --lo-color-wine-magenta-lifted:   #832D58;
  --lo-color-antique-copper-lifted: #9C5638;
  --lo-color-muted-amber-lifted:    #B49565;

  --lo-gradient-oxidized-lifted: linear-gradient(
    135deg,
    var(--lo-color-aubergine-lifted)        0%,
    var(--lo-color-wine-magenta-lifted)    38%,
    var(--lo-color-antique-copper-lifted)  70%,
    var(--lo-color-muted-amber-lifted)    100%
  );
}

/* ---------- NEUTRAL COLORS — SEMANTIC TOKENS ----------
   Source of truth for backgrounds, text, and borders.
   Use the semantic variables (--lo-bg-cream, --lo-text-main, etc.),
   not the raw hexes, so future theme tuning is one place. */
:root {
  /* raw values */
  --lo-cream:           #FFF8F0;   /* warm cream — primary canvas */
  --lo-dark:            #0d0e18;   /* editorial dark — quote/manifesto blocks only */
  --lo-ink:             #1a1a2e;   /* near-black with purple bias — body text */
  --lo-sub-ink:         #4a3550;   /* muted purple — secondary text */
  --lo-hairline:        #ebdec8;   /* low-saturation warm border */
  --lo-meta:            #a99178;   /* eyebrow / metadata copper-mute */

  /* semantic aliases — preferred entry point in components */
  --lo-bg-cream:        var(--lo-cream);
  --lo-bg-dark:         var(--lo-dark);
  --lo-text-main:       var(--lo-ink);
  --lo-text-muted:      var(--lo-sub-ink);
  --lo-text-meta:       var(--lo-meta);
  --lo-border-hairline: var(--lo-hairline);

  /* inverse — for use on dark blocks */
  --lo-bg-dark-text:        #ede1c8;   /* warm cream readable on dark */
  --lo-bg-dark-text-muted:  #c9b896;   /* muted cream */
  --lo-bg-dark-hairline:    rgba(160, 120, 64, 0.25);  /* very subtle gold on dark */
}

/* ---------- USAGE QUICK REFERENCE ----------
   background:    var(--lo-bg-cream)
   body text:     color: var(--lo-text-main)
   muted text:    color: var(--lo-text-muted)
   eyebrow/meta:  color: var(--lo-text-meta)
   hairline:      border: 0.5px solid var(--lo-border-hairline)
   wordmark fill:
     background: var(--lo-gradient-oxidized);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
   dark block:    background: var(--lo-bg-dark); color: var(--lo-bg-dark-text);
*/