/* ==========================================================================
   vendo design tokens
   A vending machine for pro software. Paper-and-ink desktop calm,
   soft desktop controls, one blue action, an amber coin. Light first, dark selected.
   ========================================================================== */

:root {
  /* ---- neutrals: paper & ink -------------------------------------------- */
  --paper:      #f5f5f5;   /* page canvas */
  --paper-2:    #ededed;   /* sunk wells, slot windows */
  --card:       #ffffff;   /* raised surfaces */
  --card-2:     #fafaf8;   /* hover / secondary surface */
  --ink:        #000000;   /* primary text */
  --ink-2:      #5c5c5c;   /* secondary text */
  --ink-3:      #8c8c8c;   /* captions, struck prices */
  --line:       #e3e3e3;   /* hairlines */
  --line-2:     #d0d0d0;   /* control borders */
  --scrim:      rgba(17, 17, 19, 0.38);

  /* ---- brand ------------------------------------------------------------- */
  --vend:       #2563ff;   /* vend blue: the one call to action */
  --vend-hi:    #5a8bff;
  --vend-lo:    #1645d4;
  --vend-wash:  #e8eeff;
  --coin:       #2563ff;   /* the accent: vee, the full stop, machine lights (same vendo blue as the buttons) */
  --vee:        #2563ff;
  --lcd:        #141518;   /* LED price strip */
  --lcd-on:     #6ea8ff;
  --lcd-edge:   #000000;

  /* ---- category hues (key tiles) ---------------------------------------- */
  --cat-code:   #2563ff;   /* A · ai coding */
  --cat-create: #f0458f;   /* B · create & design */
  --cat-focus:  #13a86a;   /* C · productivity */
  --cat-build:  #ff7a1a;   /* D · build & ship */
  --cat-biz:    #7457f5;   /* E · business */

  /* ---- status ------------------------------------------------------------ */
  --ok:         #108a4a;
  --ok-wash:    #e3f5ea;
  --sale:       #d92f3a;
  --sale-wash:  #fde8e8;

  /* ---- type -------------------------------------------------------------- */
  --f-display: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
  --f-wordmark: "Unbounded", "Inter", -apple-system, system-ui, sans-serif;   /* the name only */
  --f-body:    "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
  --f-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-2xs: 11px;
  --t-xs:  12px;
  --t-sm:  13.5px;
  --t-md:  15px;
  --t-lg:  18px;
  --t-xl:  24px;
  --t-2xl: clamp(28px, 3.4vw, 40px);
  --t-3xl: clamp(44px, 7.4vw, 92px);

  /* ---- space (4px base) --------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-24: 96px;

  /* ---- radius ------------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-tile: 26%;           /* app-icon squircle-ish */
  --r-pill: 999px;

  /* ---- elevation ---------------------------------------------------------- */
  --sh-1: 0 1px 1px rgba(17, 17, 19, 0.04), 0 1px 2px rgba(17, 17, 19, 0.06);
  --sh-2: 0 1px 2px rgba(17, 17, 19, 0.05), 0 10px 28px -12px rgba(17, 17, 19, 0.18);
  --sh-3: 0 2px 6px rgba(17, 17, 19, 0.06), 0 28px 70px -24px rgba(17, 17, 19, 0.34);
  --gloss: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* ---- motion ------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --d-fast: 120ms;
  --d-mid: 220ms;
  --d-slow: 360ms;

  /* ---- layout ------------------------------------------------------------- */
  --max: 1280px;
  --gutter: clamp(16px, 3vw, 32px);
  --menubar-h: 44px;

  color-scheme: light;
}

/* Dark is its own palette, not an inversion: warm-black paper, same hues
   stepped up for the dark surface. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e0e10; --paper-2: #17171a; --card: #18181b; --card-2: #1e1e22;
    --ink: #f3f3f0; --ink-2: #ababb2; --ink-3: #74747c; --line: #26262b; --line-2: #34343a;
    --scrim: rgba(0, 0, 0, 0.6);
    --vend: #3d77ff; --vend-hi: #6d97ff; --vend-lo: #2457e0; --vend-wash: #18213a; --coin: #4d84ff; --vee: #3d77ff;
    --lcd: #0a0a0b; --lcd-edge: #2a2a2e;
    --cat-code: #3d77ff; --cat-create: #f25b9c; --cat-focus: #1fb877; --cat-build: #ff8a33; --cat-biz: #8a72ff;
    --ok: #3ccf7f; --ok-wash: #11261a; --sale: #ff6b72; --sale-wash: #2c1416;
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --sh-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 30px -12px rgba(0, 0, 0, 0.7);
    --sh-3: 0 2px 6px rgba(0, 0, 0, 0.4), 0 30px 80px -20px rgba(0, 0, 0, 0.85);
    --gloss: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0e0e10; --paper-2: #17171a; --card: #18181b; --card-2: #1e1e22;
  --ink: #f3f3f0; --ink-2: #ababb2; --ink-3: #74747c; --line: #26262b; --line-2: #34343a;
  --scrim: rgba(0, 0, 0, 0.6);
  --vend: #3d77ff; --vend-hi: #6d97ff; --vend-lo: #2457e0; --vend-wash: #18213a; --coin: #4d84ff; --vee: #3d77ff;
  --lcd: #0a0a0b; --lcd-edge: #2a2a2e;
  --cat-code: #3d77ff; --cat-create: #f25b9c; --cat-focus: #1fb877; --cat-build: #ff8a33; --cat-biz: #8a72ff;
  --ok: #3ccf7f; --ok-wash: #11261a; --sale: #ff6b72; --sale-wash: #2c1416;
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sh-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 30px -12px rgba(0, 0, 0, 0.7);
  --sh-3: 0 2px 6px rgba(0, 0, 0, 0.4), 0 30px 80px -20px rgba(0, 0, 0, 0.85);
  --gloss: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color-scheme: dark;
}