/* ============================================================
   The Peeled Closet — Color tokens
   Brand: Olive Green #434a42 · Peeled Closet Nude #f2eae6
   UI graphite #54565a · black for strong text/CTAs.
   Editorial: nude used in page BANDS, product cards on WHITE.
   All text pairings target WCAG AA.
   ============================================================ */

:root {
  /* --- Brand base --- */
  --olive: #434a42;          /* brand olive green */
  --olive-deep: #353b35;     /* hover / pressed olive */
  --olive-soft: #5b6259;     /* lighter olive for lines on dark */
  --nude: #f2eae6;           /* Peeled Closet Nude — page bands */
  --nude-deep: #e7ddd6;      /* deeper nude — hover / dividers on nude */
  --nude-veil: #f8f3f0;      /* faintest nude wash */

  /* --- Neutrals --- */
  --white: #ffffff;          /* product card surface */
  --ink: #1c1b19;            /* strong text / CTA background (warm black) */
  --ink-soft: #2c2a27;       /* pressed CTA */
  --graphite: #54565a;       /* primary UI text */
  --graphite-muted: #76777a; /* secondary text — AA on white */
  --graphite-faint: #9a9b9d; /* metadata / disabled — large text only */

  /* --- Hairlines & dividers --- */
  --line: rgba(28, 27, 25, 0.12);   /* thin divider on light */
  --line-strong: rgba(28, 27, 25, 0.22);
  --line-on-dark: rgba(242, 234, 230, 0.18);

  /* --- Occasional colour pops (use sparingly) --- */
  --banana: #e4b53f;         /* the brand banana — tiny marks only */
  --pop-rust: #9a5b3f;       /* rare editorial accent */

  /* --- Status / authentication --- */
  --status-verified: #3f6b4e;   /* Verified — calm green */
  --status-pending: #9a7b3f;    /* Pending Review — muted ochre */
  --status-docs: #4a5b6b;       /* Documentation Available — slate */
  --status-none: #76777a;       /* Not Included — neutral */
  --status-sold: #8a4a44;       /* Sold — muted oxblood */

  /* --- Condition / ripeness (banana scale) --- */
  --ripe-fresh: #3f6b4e;     /* fresh from the tree */
  --ripe-peeled: #5a7a4e;    /* well peeled */
  --ripe-ripe: #9a7b3f;      /* ripe */
  --ripe-almost: #9a5b3f;    /* almost ripe */

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --surface-page: var(--white);     /* default page */
  --surface-card: var(--white);     /* product cards */
  --surface-band: var(--nude);      /* nude editorial bands */
  --surface-band-veil: var(--nude-veil);
  --surface-ink: var(--ink);        /* footer / dark sections */
  --surface-olive: var(--olive);    /* olive feature blocks */
  --surface-raised: var(--white);   /* dialogs, popovers */

  --text-strong: var(--ink);        /* headlines, prices, CTAs */
  --text-body: var(--graphite);     /* paragraph / UI copy */
  --text-muted: var(--graphite-muted);
  --text-faint: var(--graphite-faint);
  --text-on-dark: var(--nude);
  --text-on-dark-muted: rgba(242, 234, 230, 0.66);
  --text-link: var(--ink);

  --border-card: var(--line);
  --border-input: var(--line-strong);
  --divider: var(--line);

  --accent: var(--olive);
  --accent-contrast: var(--nude);

  --focus-ring: #1c1b19;            /* 2px outline + offset */
  --focus-ring-on-dark: var(--nude);

  /* CTA */
  --cta-bg: var(--ink);
  --cta-bg-hover: #000000;
  --cta-text: var(--white);
  --cta-secondary-border: var(--ink);
}