/* ============================================================
   Visuala Studio — Color System
   Warm editorial palette: cream paper, deep forest green,
   a single electric lime accent, warm near-black ink.
   Base ramps first, then semantic aliases.
   ============================================================ */

:root {
  /* ---- Cream / warm paper neutrals ---------------------- */
  --cream-50:  #FBF8F1;  /* lifted near-white card */
  --cream-100: #F0EBE1;  /* primary page background ("cream") */
  --cream-200: #E8E2D5;  /* warm raised surface, soft cards */
  --cream-300: #DFD8C8;  /* warm surface, inset wells */
  --cream-400: #D2CAB6;  /* hairline borders on cream */
  --cream-500: #BEB49B;  /* stronger border / disabled edge */

  /* ---- Ink (warm near-black, matches wordmark) ---------- */
  --ink-900: #1D2125;    /* primary text / logo ink */
  --ink-700: #3D4742;    /* secondary text on cream (greenish slate) */
  --ink-500: #6E7370;    /* muted text, captions */
  --ink-300: #9B9D97;    /* numerals, placeholder, disabled */

  /* ---- Forest green (dark surfaces) -------------------- */
  --green-900: #0A1815;  /* deepest green — cases + footer */
  --green-800: #0F2620;  /* primary dark surface ("verde oscuro") */
  --green-700: #1A332B;  /* raised card on green */
  --green-600: #244A3E;  /* hover lift on green */
  --green-200: #AFC4B6;  /* muted text on green */
  --green-100: #D3E0D2;  /* soft text on green */

  /* ---- Electric lime accent ---------------------------- */
  --lime-500: #C8FF4F;   /* primary accent */
  --lime-600: #B2E63C;   /* hover / pressed accent */
  --lime-300: #DDFF8C;   /* tint */

  /* ---- True closure black ------------------------------ */
  --black-pure: #121212; /* footer / end-of-page (spec value) */

  /* ---- Static white ------------------------------------ */
  --white: #FFFFFF;

  /* =========================================================
     Semantic aliases — reference these in product CSS.
     ========================================================= */

  /* Surfaces */
  --surface-page:        var(--cream-100); /* default page */
  --surface-raised:      var(--cream-50);  /* cards lifted off page */
  --surface-warm:        var(--cream-200); /* warm tinted card (color-surface-warm) */
  --surface-inset:       var(--cream-300); /* wells, input fills on cream */
  --surface-dark:        var(--green-800); /* dark green section (color-dark) */
  --surface-dark-raised: var(--green-700); /* card on dark green */
  --surface-darkest:     var(--green-900); /* cases section */
  --surface-closure:     var(--green-900); /* footer (deep green-black) */

  /* Foreground / text */
  --fg-1:        var(--ink-900); /* primary text on cream */
  --fg-2:        var(--ink-700); /* secondary text on cream */
  --fg-muted:    var(--ink-500); /* captions, meta */
  --fg-on-dark:        var(--cream-100); /* primary text on green/black */
  --fg-on-dark-muted:  var(--green-200); /* secondary text on green */

  /* Accent */
  --color-accent:        var(--lime-500);
  --color-accent-press:  var(--lime-600);
  --color-accent-tint:   var(--lime-300);
  --on-accent:           var(--ink-900); /* text on lime fills */

  /* Lines */
  --border-soft:   var(--cream-400); /* hairline on cream */
  --border-strong: var(--cream-500);
  --border-on-dark: rgba(247, 246, 239, 0.16); /* hairline on green */

  /* Frosted chip glass.
     White-tinted "vidrio esmerilado" recipe for any pill chip that
     floats over imagery — services carousel, cases banner, testimonial
     card. Pairs with --fg-on-dark text. The legacy dark-tinted glass
     (rgba(18,22,20,.42) + rgba(247,246,239,.18) + blur(8px)) was
     deprecated 2026-06-24. Backdrop filter token lives in spacing.css. */
  --chip-glass-fill:   rgba(255, 255, 255, 0.16);
  --chip-glass-border: rgba(255, 255, 255, 0.18);

  /* Focus ring.
     IMPORTANT: the focus ring must NOT use the lime accent — that
     color is reserved exclusively for the primary CTA. A neutral
     ink ring keeps the accent meaningful and avoids a "highlighted"
     box appearing around icon buttons (e.g. the mobile menu toggle).
     Icon-only toggles suppress the box entirely (see Nav). */
  --focus-ring: var(--ink-700);

  /* Convenience legacy aliases used in approved copy spec */
  --color-dark:    var(--green-800);
  --color-closure: var(--green-900);
}