/*
 * tokens.css
 * Responsibility: ALL design tokens — single source of truth for every
 * color, typography, spacing, shadow, radius, and motion value in the app.
 * Reference tokens everywhere else with var(--token-name).
 *
 * Session 1: extracted from Figma (nodes 37:407, 45:878, 45:885, 45:1066).
 */

:root {

  /* ── Layout (code-derived) ── */
  --layout-max-width: 512px;
  /* Desktop "frame": app height cap when matted on wide screens */
  --layout-max-height: 880px;
  --layout-outer-padding: var(--space-7);
  /* horizontal gutter — owned by components, not layout shells */

  /* ── Spacing scale (base-4, +4px per step, 2px preserved as step-1) ── */
  --space-0: 0;
  --space-0-5: 1px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 28px;
  --space-9: 32px;
  --space-10: 36px;
  --space-11: 40px;
  --space-12: 48px;
  --space-13: 52px;
  --space-14: 56px;
  --space-15: 60px;

  /* ── Size scale (parallel to space scale — for widths/heights, not gaps/padding) ── */
  --size-7: 24px;
  --size-9: 32px;
  --size-11: 40px;

  /* ── Component sizes (Figma-derived, no clean scale step) ── */
  --size-btn: 42px;
  /* height of Md interactive controls */
  --size-btn-lg: 56px;
  /* height of Lg buttons (Figma node 110:1037) */
  --size-btn-sm: 32px;
  /* height of Sm icon buttons (Figma node 110:1567) */
  --size-icon: 24px;
  --size-icon-sm: 16px;
  --size-checkbox: 20px;
  /* checkbox control dimension */
  --size-dot: 6px;
  /* live status dot */
  --size-suggestion-item: 28px;
  /* suggestion dropdown item content (text) height */
  --suggestion-peek: var(--space-5);
  /* partial third item visible below fold in suggestion list */

  /* ── Color — Content (Figma: Styles/Tokens, node 37:407) ── */
  --color-content-default: #070700;
  /* Content/Default — primary text */
  --color-content-subtle: #838372;
  /* Content/Subtle — secondary text */
  --color-content-inverse: #ffffff;
  /* Content/Inverse — text on dark surface */
  --color-content-error: #ac4b01;
  /* Content/Error — error text (Figma node 110:4037) */
  --color-content-success: #007e0a;
  /* Content/Success — success feedback text */

  /* ── Color — Background ── */
  --color-bg: #f7f6e0;
  /* Background/Default */

  /* ── Color — Surface ── */
  --color-surface-inverse: #070700;
  /* Surface/Inverse */
  --color-surface-strong: #838372;
  /* Surface/Strong */
  --color-surface-subtle: #e6e5cd;
  /* Surface/Subtle */
  --color-surface-subtle-on-subtle: #b5b4a0;
  /* Surface/Subtle on subtle */
  --color-surface-accent: #7E3AE1;
  /* Surface/Accent — PAPO CHEIO sign, fireworks, STAGE CLEAR */

  /* ── Color — Stroke ── */
  --color-stroke-default: #070700;
  /* Stroke/Default */
  --color-stroke-subtle: #838372;
  /* Stroke/Subtle */

  /* ── Typography (Figma: Jersey 20, all Regular 400, lineHeight 100%, letterSpacing 0) ── */
  --font-family: 'Jersey 20', monospace;
  --font-weight-regular: 400;
  --line-height-default: 1;
  --line-height-body: 1.3;
  --letter-spacing-default: 0;
  --line-height-tight: 0.8;

  --font-size-body-sm: 14px;
  /* Body/Small */
  --font-size-body-md: 18px;
  /* Body/Medium */
  --font-size-label-sm: 18px;
  /* Label/Small */
  --font-size-label-lg: 28px;
  /* Label/Large */
  --font-size-label-xl: 32px;
  /* Label/Extra large */
  --font-size-title-md: 32px;
  /* Title/Medium */
  --font-size-title-lg: 40px;
  /* Title/Large */

  /* ── Shadow (Figma: Shadow/Default — offset 2 2, blur 0, #83837299) ── */
  --shadow-pixel: 2px 2px 0px rgba(131, 131, 114, 0.60);
  --shadow-celebration: 4px 4px 0 0 var(--color-stroke-default);

  /* ── Radius (Figma: 4px default, 6px for cards/inputs) ── */
  /* Note: AGENTS.md specified 0, but Figma defines 4px/6px — Figma wins. */
  --radius-default: 4px;
  /* Radius/Default — buttons, icon-buttons */
  --radius-3x: 6px;
  /* Radius/3x — cards, inputs */

  /* ── Line weight ── */
  --line-weight-default: 2px;
  /* LineWeight/Default */
  --line-weight-subtle: 1px;
  /* LineWeight/Subtle */

  /* ── Motion (~160ms "fast and dry" feel — no Figma spec, session 3) ── */
  --duration-base: 160ms;
  --duration-medium: 400ms;
  --duration-long: 600ms;
  --duration-skeleton: 1s;
  --duration-slow: 2s;
  --easing-standard: ease-out;

  /* ── Celebration component tokens ── */
  --font-size-cele-stage: 24px;
  --size-cele-chicken: 156px;
  --offset-cele-hop: -12px;
  --duration-cele-flash: 800ms;
  --duration-cele-pop: 420ms;
  --duration-card-blink: 280ms;

}

/* ── Dark mode (not specified in Figma — awaiting design input) ── */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --color-content-default:          #fffee4;
    --color-content-subtle:           #b5b4a0;
    --color-content-inverse:          #070700;
    --color-bg:                       #0c0b00;
    --color-surface-inverse:          #fffee4;
    --color-surface-strong:           #b5b4a0;
    --color-surface-subtle:           #1c1b0e;
    --color-surface-subtle-on-subtle: #2c2b1e;
    --color-stroke-default:           #fffee4;
    --color-stroke-subtle:            #838372;
  }
}
*/