/* ===========================================================================
   DESIGN TOKENS — iOS-inspired soft gold theme
   =========================================================================== */
:root {
  /* ---- Colors: Backgrounds ---- */
  --bg-main: #FAF7F0;
  --bg-card: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-subtle: #F5F0E4;
  --bg-hover: #F9F3E5;

  /* ---- Colors: Gold ---- */
  --gold-primary: #D6A84F;
  --gold-hover: #C8983F;
  --gold-active: #B7852E;
  --gold-soft: #F4E4C1;
  --gold-light: #FFF8E7;
  --gold-tint: #FBF2D8;

  /* ---- Colors: Text ---- */
  --text-main: #1C1C1E;
  --text-body: #3A3A3C;
  --text-muted: #6B7280;
  --text-subtle: #9CA3AF;
  --text-inverse: #FFFFFF;
  --text-on-gold: #FFFFFF;

  /* ---- Colors: Border ---- */
  --border-soft: #E8DED0;
  --border-medium: #D6C9B0;
  --border-strong: #B8A889;
  --border-focus: #D6A84F;

  /* ---- Colors: Semantic ---- */
  --success: #22A06B;
  --success-bg: #E6F7EF;
  --success-border: #B3E5D0;

  --danger: #E5484D;
  --danger-bg: #FCEAEA;
  --danger-border: #F5C2C4;

  --warning: #F59E0B;
  --warning-bg: #FEF3D6;
  --warning-border: #FBDEA0;

  --info: #3B82F6;
  --info-bg: #E5F0FE;
  --info-border: #BAD4FC;

  /* ---- Gradients: soft accent chips (icon squares, primary CTA, avatar) ---- */
  --grad-gold: linear-gradient(135deg, #D6A84F, #B7852E);
  --grad-sky: linear-gradient(135deg, #0EA5E9, #0369A1);
  --grad-slate: linear-gradient(135deg, #94A3B8, #64748B);
  --grad-green: linear-gradient(135deg, #10B981, #059669);
  --grad-amber: linear-gradient(135deg, #F5A623, #D97706);
  --grad-red: linear-gradient(135deg, #EF6A6E, #D93036);

  /* ---- Typography ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Sarabun", "Noto Sans Thai", "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Menlo", "Cascadia Code", monospace;
  --font-display: -apple-system, "SF Pro Display", "Sarabun", sans-serif;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Spacing ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ---- Shadow (iOS soft) ---- */
  --shadow-xs: 0 1px 2px rgba(28, 28, 30, 0.04);
  --shadow-sm: 0 2px 4px rgba(28, 28, 30, 0.05);
  --shadow-md: 0 4px 12px rgba(28, 28, 30, 0.06);
  --shadow-lg: 0 12px 32px rgba(28, 28, 30, 0.08);
  --shadow-xl: 0 20px 48px rgba(28, 28, 30, 0.12);
  --shadow-focus: 0 0 0 3px rgba(214, 168, 79, 0.25);
  --shadow-danger-focus: 0 0 0 3px rgba(229, 72, 77, 0.25);

  /* ---- Motion ---- */
  --ease-ios: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* ---- Layout ---- */
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 72px;
  --topbar-height: 64px;
  --topbar-height-mobile: 56px;
  --content-max: 1400px;

  /* ---- Z-index ---- */
  --z-base: 1;
  --z-nav: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-tooltip: 500;

  /* ---- Touch targets (Roadmap 2 A1: ≥44px) ---- */
  --touch-min: 44px;
  --touch-sm: 36px;

  /* ---- Countdown state colors ---- */
  --countdown-normal-bg: #E6F7EF;
  --countdown-normal-border: #B3E5D0;
  --countdown-normal-text: #22A06B;
  --countdown-warning-bg: #FEF3D6;
  --countdown-warning-border: #FBDEA0;
  --countdown-warning-text: #B45309;
  --countdown-danger-bg: #FFEDE1;
  --countdown-danger-border: #FDBA74;
  --countdown-danger-text: #C2410C;
  --countdown-closed-bg: #FCEAEA;
  --countdown-closed-border: #F5C2C4;
  --countdown-closed-text: #B91C1C;
}

/* ===========================================================================
   BREAKPOINT REFERENCE (Roadmap 2 A1) — mobile-first, min-width
   CSS vars can't be used in @media queries, so this block is documentation.
   Standard breakpoints to use consistently across all files:
     xs  base    : 0–479px    (mobile portrait — design target 360px)
     sm  480px+  : mobile landscape / small phones
     md  768px+  : tablet
     lg  1024px+ : desktop (sidebar persistent)
   =========================================================================== */

/* Prefer dark support later; keep single theme for MVP */