/*
 * Converge design tokens v1
 *
 * Source of truth: docs/design/tokens.md
 * Loaded globally via @import in pwa.css.
 *
 * Pages can override semantic tokens (--color-*) but should never
 * override brand tokens (--brand-*) or scale primitives (--space-*,
 * --type-*, --radius-*, --dur-*, --ease-*).
 *
 * Drift detector: scripts/design-lint.js
 * Pre-ship checklist: docs/design/checklist.md
 * Skill: docs/design/design-critique-skill/SKILL.md
 */

/* ── Brand layer (canonical) ─────────────────────────────────── */

:root {
  --brand-midnight: #000000;
  --brand-violet: #7C5CFF;
  --brand-coral: var(--brand-violet);  /* deprecated alias — was #E8584F Signal Coral; primary is now Electric Violet */
  --brand-warm-white: #FAF7F2;
  --brand-gold: #D4A853;
  --brand-teal: #2A9D8F;
  --brand-sage: #A8C5B8;
  --brand-blush: #F2C4C2;
  --brand-soft-gray: #B0ADA8;

  /* Fonts — Satoshi (display) / Inter (body) / JetBrains Mono (data) / Instrument Serif (editorial) */
  --font-display: 'Satoshi', 'General Sans', 'Inter', 'Helvetica Neue', -apple-system, sans-serif;
  --font-body: 'Inter', 'DM Sans', 'Helvetica Neue', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Space Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;
  --font-editorial: 'Instrument Serif', Georgia, serif;

  /* Type scale */
  --type-display-2xl: 4.5rem;
  --type-display-xl: 3.5rem;
  --type-display-lg: 3rem;
  --type-display-md: 2.25rem;
  --type-h1: 1.75rem;
  --type-h2: 1.375rem;
  --type-h3: 1.125rem;
  --type-body-lg: 1.125rem;
  --type-body: 1rem;
  --type-body-sm: 0.875rem;
  --type-caption: 0.75rem;
  --type-overline: 0.6875rem;

  /* Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* Line heights + letter spacing */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.4;
  --lh-relaxed: 1.6;
  --ls-display: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.02em;
  --ls-overline: 0.12em;

  /* Spacing (4/8 base) */
  --space-0: 0;
  --space-px: 1px;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-7: 1.75rem;   /* 28 — was referenced 24× across 13 pages but never defined; var() resolved to nothing and silently collapsed padding to 0 */
  --space-8: 2rem;      /* 32 */
  --space-9: 2.25rem;   /* 36 — same gap in the scale; defined defensively for the few var(--space-9) references */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */

  /* Density tokens — dense in grids, airy in heroes */
  --density-grid-gap: var(--space-3);
  --density-grid-pad: var(--space-3);
  --density-hero-gap: var(--space-6);
  --density-hero-pad: var(--space-8);

  /* Radius */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* Motion */
  --dur-instant: 80ms;
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --dur-deliberate: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.5, 1.4, 0.4, 1);

  /* Icon sizes */
  --icon-xs: 14px;
  --icon-sm: 18px;
  --icon-md: 22px;
  --icon-lg: 28px;
  --icon-xl: 40px;
  --icon-2xl: 56px;

  /* Sponsor slots (reserved — transparent until activated) */
  --color-sponsor-1: transparent;
  --color-sponsor-1-contrast: currentColor;
  --color-sponsor-2: transparent;

  /* Taste accent (defaults to brand coral — overridden by pwa-common.js for opted-in users) */
  --color-accent-taste: var(--color-accent-primary);
  --color-accent-taste-soft: var(--color-accent-primary-soft);
  --color-accent-taste-border: var(--color-accent-primary-border);
}

/* ── Dark mode (default) ─────────────────────────────────────── */

:root,
[data-theme="dark"] {
  --color-bg: var(--brand-midnight);
  --color-bg-elevated: #111111;
  --color-bg-subtle: rgba(255, 255, 255, 0.04);
  --color-surface-card: rgba(17, 17, 17, 0.9);
  --color-surface-overlay: rgba(0, 0, 0, 0.7);
  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.20);

  --color-text: var(--brand-warm-white);
  --color-text-muted: var(--brand-soft-gray);
  --color-text-faint: #7a7872;
  --color-text-on-accent: var(--brand-midnight);

  --color-accent-primary: var(--brand-coral);
  --color-accent-primary-soft: rgba(124, 92, 255, 0.12);
  --color-accent-primary-border: rgba(124, 92, 255, 0.25);
  --color-accent-premium: var(--brand-gold);
  --color-accent-discovery: var(--brand-teal);
  --color-accent-success: var(--brand-sage);
  --color-accent-soft: var(--brand-blush);
  --color-accent-rank-1: var(--brand-gold);
  --color-accent-rank-2: var(--brand-soft-gray);
  --color-accent-rank-3: #B5845A;

  --color-state-hover: rgba(255, 255, 255, 0.04);
  --color-state-pressed: rgba(255, 255, 255, 0.08);
  --color-state-disabled: rgba(176, 173, 168, 0.4);
  --color-state-error: #E53E3E;
  --color-state-warning: #D69E2E;

  --color-photo-overlay: rgba(0, 0, 0, 0.6);
  --color-photo-overlay-strong: rgba(0, 0, 0, 0.78);
  --color-photo-fallback: linear-gradient(135deg, var(--color-bg-elevated), var(--color-bg));

  --cat-tint-nightlife: linear-gradient(135deg, rgba(124, 92, 255, 0.22), var(--color-bg-elevated));
  --cat-tint-food: linear-gradient(135deg, rgba(212, 168, 83, 0.22), var(--color-bg-elevated));
  --cat-tint-outdoor: linear-gradient(135deg, rgba(168, 197, 184, 0.22), var(--color-bg-elevated));
  --cat-tint-culture: linear-gradient(135deg, rgba(242, 196, 194, 0.22), var(--color-bg-elevated));
  --cat-tint-wellness: linear-gradient(135deg, rgba(42, 157, 143, 0.22), var(--color-bg-elevated));
  --cat-tint-default: linear-gradient(135deg, rgba(176, 173, 168, 0.15), var(--color-bg-elevated));

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 24px rgba(124, 92, 255, 0.25);
}

/* ── Light mode ──────────────────────────────────────────────── */

[data-theme="light"] {
  --color-bg: var(--brand-warm-white);
  --color-bg-elevated: #F1ECE3;
  --color-bg-subtle: rgba(0, 0, 0, 0.04);
  --color-surface-card: rgba(255, 255, 255, 0.92);
  --color-surface-overlay: rgba(250, 247, 242, 0.85);
  --color-border: rgba(0, 0, 0, 0.10);
  --color-border-strong: rgba(0, 0, 0, 0.20);

  --color-text: var(--brand-midnight);
  --color-text-muted: #7a7872;
  --color-text-faint: #a8a59f;
  --color-text-on-accent: var(--brand-warm-white);

  --color-accent-primary: var(--brand-coral);
  --color-accent-primary-soft: rgba(124, 92, 255, 0.08);
  --color-accent-primary-border: rgba(124, 92, 255, 0.30);
  --color-accent-premium: #B58C2E;
  --color-accent-discovery: #1F7B71;
  --color-accent-success: #6B9484;
  --color-accent-soft: var(--brand-blush);
  --color-accent-rank-1: #B58C2E;
  --color-accent-rank-2: #7a7872;
  --color-accent-rank-3: #8C5F3C;

  --color-state-hover: rgba(0, 0, 0, 0.04);
  --color-state-pressed: rgba(0, 0, 0, 0.08);
  --color-state-disabled: rgba(122, 120, 114, 0.5);
  --color-state-error: #C53030;
  --color-state-warning: #B7791F;

  --color-photo-overlay: rgba(0, 0, 0, 0.55);
  --color-photo-overlay-strong: rgba(0, 0, 0, 0.75);
  --color-photo-fallback: linear-gradient(135deg, var(--color-bg-elevated), var(--color-bg));

  --cat-tint-nightlife: linear-gradient(135deg, rgba(124, 92, 255, 0.15), var(--color-bg-elevated));
  --cat-tint-food: linear-gradient(135deg, rgba(212, 168, 83, 0.15), var(--color-bg-elevated));
  --cat-tint-outdoor: linear-gradient(135deg, rgba(168, 197, 184, 0.20), var(--color-bg-elevated));
  --cat-tint-culture: linear-gradient(135deg, rgba(242, 196, 194, 0.25), var(--color-bg-elevated));
  --cat-tint-wellness: linear-gradient(135deg, rgba(42, 157, 143, 0.15), var(--color-bg-elevated));
  --cat-tint-default: linear-gradient(135deg, rgba(176, 173, 168, 0.18), var(--color-bg-elevated));

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 24px rgba(124, 92, 255, 0.30);
}

/* ── Legacy aliases (deprecated — keep until all pages migrated) ── */
/*
 * These aliases let pre-migration pages keep working while we move
 * file-by-file. Remove them once the lint script reports 0 high-severity
 * drift across all public/*.html files.
 */
:root {
  --gold: var(--color-accent-primary);        /* deprecated — was the misnamed Signal Coral */
  --green: var(--color-accent-discovery);     /* deprecated — was the invented #1D9E75 */
  --white: var(--color-text);                 /* deprecated — use --color-text */
  --muted: var(--color-text-muted);           /* deprecated */
  --muted2: var(--color-text-faint);          /* deprecated */
  --card: var(--color-surface-card);          /* deprecated — use --color-surface-card */
  --subtle: var(--color-bg-subtle);           /* deprecated */
  --bg: var(--color-bg);                      /* deprecated — use --color-bg */
  --border: var(--color-border);              /* deprecated — use --color-border */
  --bg2: var(--color-bg-elevated);            /* deprecated — use --color-bg-elevated */
  --gold-dim: var(--color-accent-primary-soft);     /* deprecated */
  --gold-border: var(--color-accent-primary-border);/* deprecated */
  --teal: var(--color-accent-discovery);            /* deprecated */
  --gold-accent: var(--color-accent-premium);       /* deprecated */
  --blush: var(--brand-blush);                      /* deprecated — use --brand-blush */
  --gold2: #9D83FF;                                  /* legacy avatar-gradient second stop — violet tint (was coral #f07a72) */
  --btn-text: var(--color-text-on-accent);          /* deprecated */
  --subtle-border: var(--color-border);             /* deprecated */
  --subtle-bg: var(--color-bg-subtle);              /* deprecated */
  --accent-glow: rgba(124, 92, 255,0.10);              /* legacy hero wash */
}

/* ── Reduced motion ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── System preference fallback ──────────────────────────────── */
/*
 * If no data-theme is set on the page, fall back to OS preference.
 * Pages that explicitly set [data-theme="dark"] or [data-theme="light"]
 * on <html> override this.
 *
 * IMPORTANT: this block MUST mirror the full [data-theme="light"] token
 * set above, declaration-for-declaration. None of the product/mobile
 * surfaces (feed, near-you, profile, board, memories, spot, explore-map,
 * taste, group loop) set data-theme, so light-OS phones — the iOS default —
 * resolve their light theme entirely through here. Any token defined in
 * [data-theme="light"] but omitted here keeps its DARK value on those
 * phones, producing a half-light/half-dark render (dark scrims under
 * sheets, invisible borders, collapsed text hierarchy, wrong state colors).
 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-bg: var(--brand-warm-white);
    --color-bg-elevated: #F1ECE3;
    --color-bg-subtle: rgba(0, 0, 0, 0.04);
    --color-surface-card: rgba(255, 255, 255, 0.92);
    --color-surface-overlay: rgba(250, 247, 242, 0.85);
    --color-border: rgba(0, 0, 0, 0.10);
    --color-border-strong: rgba(0, 0, 0, 0.20);

    --color-text: var(--brand-midnight);
    --color-text-muted: #7a7872;
    --color-text-faint: #a8a59f;
    --color-text-on-accent: var(--brand-warm-white);

    --color-accent-primary: var(--brand-coral);
    --color-accent-primary-soft: rgba(124, 92, 255, 0.08);
    --color-accent-primary-border: rgba(124, 92, 255, 0.30);
    --color-accent-premium: #B58C2E;
    --color-accent-discovery: #1F7B71;
    --color-accent-success: #6B9484;
    --color-accent-soft: var(--brand-blush);
    --color-accent-rank-1: #B58C2E;
    --color-accent-rank-2: #7a7872;
    --color-accent-rank-3: #8C5F3C;

    --color-state-hover: rgba(0, 0, 0, 0.04);
    --color-state-pressed: rgba(0, 0, 0, 0.08);
    --color-state-disabled: rgba(122, 120, 114, 0.5);
    --color-state-error: #C53030;
    --color-state-warning: #B7791F;

    --color-photo-overlay: rgba(0, 0, 0, 0.55);
    --color-photo-overlay-strong: rgba(0, 0, 0, 0.75);
    --color-photo-fallback: linear-gradient(135deg, var(--color-bg-elevated), var(--color-bg));

    --cat-tint-nightlife: linear-gradient(135deg, rgba(124, 92, 255, 0.15), var(--color-bg-elevated));
    --cat-tint-food: linear-gradient(135deg, rgba(212, 168, 83, 0.15), var(--color-bg-elevated));
    --cat-tint-outdoor: linear-gradient(135deg, rgba(168, 197, 184, 0.20), var(--color-bg-elevated));
    --cat-tint-culture: linear-gradient(135deg, rgba(242, 196, 194, 0.25), var(--color-bg-elevated));
    --cat-tint-wellness: linear-gradient(135deg, rgba(42, 157, 143, 0.15), var(--color-bg-elevated));
    --cat-tint-default: linear-gradient(135deg, rgba(176, 173, 168, 0.18), var(--color-bg-elevated));

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 24px rgba(124, 92, 255, 0.30);
  }
}