/* ============================================================
   FREENY — BRAND TOKENS  (light, consumer-friendly)
   This is the ONLY file to edit when the Claude Design identity
   is chosen. Swap the values here and the whole site follows.
   ============================================================ */

:root{
  /* --- neutrals: cool-grey bias, not pure grey --- */
  --page:#F5F7F8;
  --surface:#FFFFFF;
  --surface-2:#F0F3F5;
  --inset:#F2F5F6;          /* image backdrops, quiet wells */

  --text:#15181C;
  --text-2:#3F4A54;
  --text-muted:#68757F;
  --line:#E2E7EA;
  --line-2:#CFD6DB;

  /* --- primary action: near-black. Highest trust, reskins cleanly --- */
  --primary:#15181C;
  --primary-hi:#2A3038;
  --on-primary:#FFFFFF;

  /* --- accent: positive green. Earnings, availability, go --- */
  --accent:#0C7A56;
  --accent-hi:#0A6849;
  --accent-soft:#E6F4EF;
  --on-accent:#FFFFFF;

  /* --- premium tier: gold, used sparingly for Black --- */
  --gold:#8A6212;           /* text-safe on light */
  --gold-fill:#D6A845;      /* fills and badges */
  --gold-soft:#FBF3E1;

  /* --- availability states --- */
  --ok:#0C7A56;      --ok-soft:#E6F4EF;
  --warn:#9A6A08;    --warn-soft:#FBF2DF;
  --bad:#B3382C;     --bad-soft:#FBEDEB;

  /* --- legacy aliases kept so older markup keeps working --- */
  --brass:var(--gold);
  --star:#8A6206;          /* overridden per brand in themes.css */
  --obsidian:var(--inset);
  --avail:var(--ok);
  --out:var(--bad);

  /* --- type: friendly geometric sans, no condensed faces --- */
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:var(--font-body);
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  /* --- spacing (8pt) --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* --- shape: generous rounding, soft depth --- */
  --r-sm:10px; --r:14px; --r-lg:20px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(16,24,32,.06), 0 1px 3px rgba(16,24,32,.05);
  --shadow-2:0 2px 6px rgba(16,24,32,.06), 0 8px 20px rgba(16,24,32,.07);
  --shadow-3:0 10px 34px rgba(16,24,32,.12);

  --maxw:1140px;
  --tap:48px;               /* generous, consumer-app scale */
}