/* ==========================================================================
   tokens.css — the design charter
   --------------------------------------------------------------------------
   This file is the SINGLE SOURCE OF TRUTH for the look of the whole site.
   Everything visual (colors, font sizes, spacing, corners, shadows) is defined
   here as a CSS custom property (a "CSS variable") and referenced everywhere
   else with `var(--name)`.

   Why do it this way?
   - To re-theme the site you edit ONE value here, not dozens of files.
   - `app.css` and the HTML never hard-code a color or size — they only point
     at these variables. (Think of these as module-level constants in Python.)

   How to tweak: change a value below, save, refresh the browser. That's it.
   Palette: "Slate & Blue" — neutral cool-gray surfaces + one professional blue.

   NOTE: This is light-theme only for now. A dark theme would be added later as a
   `[data-theme="dark"] { ... }` block overriding the same variable names; the
   rest of the app would not need to change. (Marker left at the bottom.)
   ========================================================================== */

:root {
  /* Tell the browser our UI is designed for light backgrounds. This makes
     native form controls (scrollbars, date pickers, etc.) render in light mode. */
  color-scheme: light;

  /* ----------------------------------------------------------------------
     COLOR
     ---------------------------------------------------------------------- */

  /* Brand accent — used sparingly: primary buttons, links, active states.
     `--brand-contrast` is the text/icon color that sits ON TOP of --brand
     (e.g. white text on a blue button) and must stay high-contrast. */
  --brand: #2F5FD0;
  --brand-contrast: #FFFFFF;
  --brand-hover: #2A52BD;   /* slightly darker brand for hover/pressed states */

  /* Surfaces — the page background vs. raised "cards" (login box, product cards). */
  --bg: #F6F8FB;            /* page background (very light cool gray) */
  --surface: #FFFFFF;       /* cards, menus, inputs — the "paper" the UI sits on */

  /* Text + lines */
  --text: #1B2533;          /* primary text (deep slate, not pure black) */
  --text-muted: #5B6B7F;    /* secondary text: labels, captions, helper copy */
  --border: #E2E8F0;        /* hairline borders, dividers, input outlines */

  /* Price — intentionally its own token so pricing can be emphasized site-wide.
     It is a near-black; the visual "pop" comes from size + weight (see app.css),
     not from a loud color, which keeps the look professional. */
  --price: #101828;
  /* "Deal" pricing: the discounted price reads in a warm red, the −X% badge in
     orange, so a promotion clearly stands out from the regular --price. */
  --deal: #C0341D;      /* discounted (current) price */
  --discount: #C2410C;  /* −X% discount badge */

  /* Stock status — semantic colors. These three must read clearly even for
     color-blind users, so in the UI they are ALWAYS paired with text
     ("In stock: 42", "Low stock: 3", "Out of stock"), never color alone. */
  --stock-ok:  #1F8A4C;     /* green  — in stock */
  --stock-low: #B06A00;     /* amber  — low stock */
  --stock-out: #8A94A3;     /* gray   — out of stock */
  --stock-incoming: #0E7490;/* teal   — out of stock but a restock is scheduled */

  /* Focus ring — drawn around the keyboard-focused element for accessibility.
     `color-mix` blends the brand with transparency so the ring is a soft halo.
     (color-mix is well supported in modern browsers.) */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);

  /* ----------------------------------------------------------------------
     TYPE
     ---------------------------------------------------------------------- */

  /* System font stack: uses whatever clean sans-serif the user's OS ships
     (San Francisco on macOS/iOS, Segoe UI on Windows, Roboto on Android).
     Deliberately NOT a web font — that would add a third-party dependency,
     which the spec asks us to avoid. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  /* A small modular type scale. Sizes use `rem` so they respect the user's
     browser font-size setting (good for accessibility). 1rem = 16px by default. */
  --fs-sm:   0.875rem;  /* 14px — badges, captions, helper text */
  --fs-base: 1rem;      /* 16px — body copy, inputs */
  --fs-lg:   1.125rem;  /* 18px — card titles, section headings */
  --fs-xl:   1.5rem;    /* 24px — page titles and the prominent PRICE */

  /* Two font-weights we reuse for emphasis (e.g. the price is "bold"). */
  --fw-normal: 400;
  --fw-bold: 700;

  /* ----------------------------------------------------------------------
     SPACE — a 4px-based scale. Use these for padding, margins, and gaps so
     spacing stays consistent everywhere.
     ---------------------------------------------------------------------- */
  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */

  /* ----------------------------------------------------------------------
     RADIUS — corner rounding.
     ---------------------------------------------------------------------- */
  --radius: 8px;        /* default: inputs, buttons, badges */
  --radius-lg: 14px;    /* larger: cards, the login panel, gallery frame */

  /* ----------------------------------------------------------------------
     SHADOW — one soft, layered elevation used for raised cards/menus.
     ---------------------------------------------------------------------- */
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06),
            0 4px 12px rgba(16, 24, 40, 0.06);
  /* A stronger elevation used when a card is hovered/lifted. */
  --shadow-lg: 0 6px 18px rgba(16, 24, 40, 0.10);
}

/* --------------------------------------------------------------------------
   DARK THEME (placeholder for a later phase)
   --------------------------------------------------------------------------
   To add dark mode later, uncomment and tune. The app would opt in by setting
   <html data-theme="dark">. No other file would need to change.

   [data-theme="dark"] {
     color-scheme: dark;
     --bg: #0E1320;
     --surface: #161C2B;
     --text: #E7ECF3;
     --text-muted: #9AA6B8;
     --border: #2A3346;
     --price: #FFFFFF;
     --brand: #5C8BFF;
     ...
   }
   -------------------------------------------------------------------------- */