/* Gift Lista — design tokens
 * Extracted from the static prototype. This is the SOURCE OF TRUTH for
 * colors, typography, spacing, and density scales for the production app.
 *
 * In Phase 0, the real app should consume these tokens (either by importing
 * this file or by translating them into the chosen framework's theming
 * system — Tailwind config, styled-system theme, CSS-in-JS, whatever).
 * Do NOT redefine the palette in production code.
 *
 * The active theme below is "Grafit" (mono / neutral), chosen by the user
 * over four other palettes (Topla / Smirena / Sveža / Breskva). Keep the
 * other palettes commented out at the bottom for future theme support.
 */

:root {
  /* ── Surface / ink ───────────────────────────────────────────── */
  --bg:        oklch(0.985 0.005 80);   /* cream app background */
  --surface:   #ffffff;                  /* card / sheet surface */
  --ink:       oklch(0.22 0.01 70);     /* primary text (near-black, warm) */
  --ink-soft:  oklch(0.45 0.01 70);     /* secondary text */
  --ink-mute:  oklch(0.62 0.01 70);     /* tertiary / metadata text */
  --hair:      oklch(0.92 0.005 80);    /* hairline borders */
  --hair-soft: oklch(0.95 0.005 80);    /* faintest dividers */

  /* ── Accent (Grafit theme) ───────────────────────────────────── */
  --accent: oklch(0.30 0.02 70);
  --tint:   oklch(0.93 0.01 70);
  --deep:   oklch(0.18 0.01 70);

  /* ── Type ────────────────────────────────────────────────────── */
  --font-sans:  "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-mono:  "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* ── Spacing (regular density) ───────────────────────────────── */
  --pad-x:    20px;
  --pad-y:    16px;
  --gap:      14px;
  --card-pad: 18px;

  /* ── iOS safe areas ──────────────────────────────────────────── */
  --safe-top: max(env(safe-area-inset-top, 0px), 12px);
  --safe-bot: max(env(safe-area-inset-bottom, 0px), 16px);
}

/* ── Density scales (compact / spacious) ───────────────────────────
 * Apply these on a wrapper element by adding data-density="compact" or
 * data-density="spacious". The prototype uses "regular" by default.
 */
[data-density="compact"] {
  --pad-x: 16px; --pad-y: 12px; --gap: 10px; --card-pad: 14px;
}
[data-density="spacious"] {
  --pad-x: 24px; --pad-y: 22px; --gap: 18px; --card-pad: 22px;
}

/* ── Alternative palettes (future themes) ──────────────────────────
 * Swap into :root or apply on a wrapper with data-theme="topla" etc.
 * Each palette uses single-chroma, varied hue — design rule from
 * the original prototype, do not break this contract.

[data-theme="topla"]   { --accent: oklch(0.72 0.13 35);  --tint: oklch(0.94 0.04 35);  --deep: oklch(0.42 0.10 35); }
[data-theme="smirena"] { --accent: oklch(0.68 0.10 285); --tint: oklch(0.94 0.03 285); --deep: oklch(0.40 0.09 285); }
[data-theme="sveza"]   { --accent: oklch(0.68 0.09 165); --tint: oklch(0.94 0.03 165); --deep: oklch(0.40 0.07 165); }
[data-theme="breskva"] { --accent: oklch(0.88 0.03 40);  --tint: oklch(0.96 0.015 40); --deep: oklch(0.40 0.07 40); }
*/

/* ── Type scale notes (referenced in prototype, codify in production) ─
 * Hero title:    34px, weight 600, letter-spacing -0.6px
 * Section title: 22px, weight 600, letter-spacing -0.4px
 * Body:          15px, weight 400, line-height 1.45
 * Meta/caption:  12px, weight 500, letter-spacing 0.2px, often --font-mono
 *
 * Border radius:
 *   - Buttons:     10–14px (size-dependent: sm 10, md 12, lg 14)
 *   - Cards:       16px
 *   - Sheets/hero: 20–24px
 *   - Pills:       999px
 *
 * Shadow (soft, single elevation):
 *   0 10px 60px rgba(0,0,0,0.08)  — used on the centered mobile shell
 */