/* VVFulfillment Design Tokens
 * Source: Figma — _VV Fulfillment / vvf
 * File: jafam1F3uTCZUBHsCrXExV
 * Nodes: 1:1580 (Color System) + 1:60 (Mobile page — variable usage verified)
 * Generated: 2026-05-05
 *
 * Figma library variable name → CSS variable mapping:
 *   GREY/50         → --c-grey-50      GREY/100   → --c-grey-100   GREY/300 → --c-grey-300
 *   GREY/400        → --c-grey-400     GREY/500   → --c-grey-500   GREY/600 → --c-grey-600
 *   GREY/700        → --c-grey-700     GREY/800   → --c-grey-800
 *   GREEN/100       → --c-green-100    GREEN/200  → --c-green-200  GREEN/400 → --c-green-400
 *   GREEN/500       → --c-green-500    GREEN/600  → --c-green-600  GREEN/800 → --c-green-800
 *   MUTE GREEN/100  → --c-mgreen-100   MUTE GREEN/200 → --c-mgreen-200
 *   MUTE GREEN/300  → --c-mgreen-300   MUTE GREEN/400 → --c-mgreen-400
 *   BROWN/600       → --c-brown-600
 */

:root {
  /* ── White & Black ── */
  --c-white: #FFFFFF;
  --c-black: #000000;

  /* ── Grey scale ── */
  --c-grey-50:  #F7F7F5;
  --c-grey-100: #DADEDD;
  --c-grey-200: #C3C6C5;
  --c-grey-300: #B2B7B7;
  --c-grey-400: #8C8F8E;
  --c-grey-500: #6E7271;
  --c-grey-600: #434646;
  --c-grey-700: #272727;
  --c-grey-800: #1A1A1A;

  /* ── Green (primary brand ramp) ── */
  --c-green-100: #C9EEBA;
  --c-green-200: #ADD79C;
  --c-green-300: #86C17A;
  --c-green-400: #4E8450;
  --c-green-500: #3E633C;
  --c-green-600: #274E25;
  --c-green-700: #17460F;
  --c-green-800: #0A2905;

  /* ── Mute Green (surface tints) ── */
  --c-mgreen-100: #F3F9F0;
  --c-mgreen-200: #F0F5EE;
  --c-mgreen-300: #DAE6D5;
  --c-mgreen-400: #CAD8C5;
  --c-mgreen-500: #C6D0C2;
  --c-mgreen-600: #C4C8BC;

  /* ── Brown (accent) ── */
  --c-brown-100: #EBDCB3;
  --c-brown-200: #D7C48E;
  --c-brown-300: #C5B17A;
  --c-brown-400: #BAA466;
  --c-brown-500: #A18B4E;
  --c-brown-600: #856E30;
  --c-brown-700: #735B18;
  --c-brown-800: #56461A;

  /* ── Semantic aliases (canonical usage) ── */
  --color-bg:           var(--c-white);
  --color-bg-muted:     var(--c-grey-50);
  --color-bg-tint:      var(--c-mgreen-200);
  --color-bg-inverse:   var(--c-grey-800);

  --color-text:         var(--c-grey-800);
  --color-text-muted:   var(--c-grey-500);
  --color-text-subtle:  var(--c-grey-400);
  --color-text-inverse: var(--c-white);

  --color-border:        var(--c-grey-100);
  --color-border-strong: var(--c-grey-200);

  --color-brand:         var(--c-green-500);
  --color-brand-strong:  var(--c-green-600);
  --color-brand-soft:    var(--c-mgreen-300);
  --color-brand-on:      var(--c-white);

  --color-accent:        var(--c-brown-500);
  --color-accent-soft:   var(--c-brown-100);

  /* ── Typography ── */
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', 'Noto Sans KR', system-ui, sans-serif;
  --font-kr:      'Noto Sans KR', system-ui, sans-serif;

  /* ── Radius (per Figma cards: 8 / 20 / 24) ── */
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  24px;

  /* ── Shadow (per Figma card: shadow-[0px_3px_50px_0px_rgba(0,0,0,0.07)]) ── */
  --shadow-card: 0px 3px 50px 0px rgba(0, 0, 0, 0.07);

  /* ── Hero overlay gradients (Figma nodes 8:100, 8:121) ── */
  --gradient-dim-full: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
  --gradient-dim-half: linear-gradient(to right, rgba(0, 0, 0, 0.9) 50%, rgba(0, 0, 0, 0) 100%);
}

/* ──────────────────────────────────────────────────────────────────
 * UTILITIES — primitive components matched to Figma nodes
 * ──────────────────────────────────────────────────────────────── */

/* Hero image overlay (Figma 8:100) — covers full width, fades L→R
 * Apply as absolute child inside a relative parent containing background image. */
.dim-full {
  position: absolute;
  inset: 0;
  background: var(--gradient-dim-full);
  pointer-events: none;
}

/* Hero image overlay (Figma 8:121) — covers right half only, fades from 50%→100% */
.dim-half {
  position: absolute;
  inset: 0;
  background: var(--gradient-dim-half);
  pointer-events: none;
}

/* Category icon container (Figma 2:2989 IC_Cosmetic and siblings)
 * 60×60 box centering a stroke SVG icon at its native size.
 * Override stroke color via --icon-stroke (default GREEN/800). */
.ic {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  --icon-stroke: var(--c-green-800);
}
.ic > svg,
.ic > img {
  width: 100%;
  height: 100%;
  display: block;
  /* SVGs from Figma use var(--stroke-0, #0A2905); we re-bind to our token */
  --stroke-0: var(--icon-stroke);
}

/* Modifier: reverse colour for dark backgrounds */
.ic--on-dark { --icon-stroke: var(--c-mgreen-200); }