/**
 * YambPro Design Tokens
 * Generated from the YambPro Brand Identity & Design System
 *
 * Usage: Import this file first in your main CSS file
 * All values are available as CSS custom properties (variables)
 */

:root {
  /* =========================================
     COLOR PALETTE
     ========================================= */

  /* Amber - Primary Brand Color */
  --amber-50: #FFFBEB;
  --amber-100: #FEF3C7;
  --amber-200: #FDE68A;
  --amber-300: #FCD34D;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;
  --amber-600: #D97706;
  --amber-700: #B45309;
  --amber-800: #92400E;
  --amber-900: #78350F;
  --amber-950: #451A03;

  /* Stone - Neutral with warm undertone */
  --stone-50: #FAFAF9;
  --stone-100: #F5F5F4;
  --stone-200: #E7E5E4;
  --stone-300: #D6D3D1;
  --stone-400: #A8A29E;
  --stone-500: #78716C;
  --stone-600: #57534E;
  --stone-700: #44403C;
  --stone-800: #292524;
  --stone-900: #1C1917;
  --stone-950: #0C0A09;

  /* Burgundy - Celebration, Premium */
  --burgundy-400: #DC2626;
  --burgundy-500: #B91C1C;
  --burgundy-600: #991B1B;
  --burgundy-700: #7F1D1D;

  /* Emerald - Success, Bonus */
  --emerald-400: #34D399;
  --emerald-500: #10B981;
  --emerald-600: #059669;

  /* Sky - Information, Held State */
  --sky-400: #38BDF8;
  --sky-500: #0EA5E9;
  --sky-600: #0284C7;
  --sky-700: #0369A1;

  /* =========================================
     SEMANTIC COLORS
     ========================================= */

  /* Surfaces */
  --color-bg-primary: var(--stone-50);
  --color-bg-secondary: var(--stone-100);
  --color-bg-card: white;
  --color-bg-elevated: white;

  /* Borders */
  --color-border: var(--stone-200);
  --color-border-subtle: var(--stone-100);
  --color-border-strong: var(--stone-300);

  /* Text */
  --color-text-primary: var(--stone-900);
  --color-text-secondary: var(--stone-600);
  --color-text-muted: var(--stone-400);
  --color-text-inverted: white;

  /* Brand */
  --color-brand-primary: var(--amber-500);
  --color-brand-hover: var(--amber-400);
  --color-brand-active: var(--amber-600);

  /* Game States */
  --color-roll: var(--amber-500);
  --color-hold: var(--sky-500);
  --color-available: var(--amber-100);
  --color-filled: var(--stone-100);
  --color-locked: var(--stone-200);

  /* Feedback */
  --color-success: var(--emerald-500);
  --color-warning: var(--amber-500);
  --color-error: var(--burgundy-500);
  --color-info: var(--sky-500);

  /* Scores */
  --color-bonus: var(--emerald-600);
  --color-zero: var(--stone-400);
  --color-high-score: var(--amber-500);

  /* =========================================
     TYPOGRAPHY
     ========================================= */

  /* Font Families */
  --font-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Font Sizes (Major Third Scale - 1.25) */
  --text-xs: 0.64rem;      /* 10.24px */
  --text-sm: 0.8rem;       /* 12.8px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.25rem;      /* 20px */
  --text-xl: 1.563rem;     /* 25px */
  --text-2xl: 1.953rem;    /* 31.25px */
  --text-3xl: 2.441rem;    /* 39px */
  --text-4xl: 3.052rem;    /* 48.8px */
  --text-5xl: 3.815rem;    /* 61px */
  --text-6xl: 4.768rem;    /* 76.3px */

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* =========================================
     SPACING
     ========================================= */

  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;   /* 2px */
  --space-1: 0.25rem;      /* 4px */
  --space-1-5: 0.375rem;   /* 6px */
  --space-2: 0.5rem;       /* 8px */
  --space-2-5: 0.625rem;   /* 10px */
  --space-3: 0.75rem;      /* 12px */
  --space-3-5: 0.875rem;   /* 14px */
  --space-4: 1rem;         /* 16px */
  --space-5: 1.25rem;      /* 20px */
  --space-6: 1.5rem;       /* 24px */
  --space-7: 1.75rem;      /* 28px */
  --space-8: 2rem;         /* 32px */
  --space-9: 2.25rem;      /* 36px */
  --space-10: 2.5rem;      /* 40px */
  --space-11: 2.75rem;     /* 44px */
  --space-12: 3rem;        /* 48px */
  --space-14: 3.5rem;      /* 56px */
  --space-16: 4rem;        /* 64px */
  --space-20: 5rem;        /* 80px */
  --space-24: 6rem;        /* 96px */

  /* =========================================
     BORDER RADIUS
     ========================================= */

  --radius-none: 0;
  --radius-sm: 0.25rem;    /* 4px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-3xl: 2rem;      /* 32px */
  --radius-full: 9999px;

  /* =========================================
     SHADOWS
     ========================================= */

  /* Elevation shadows (warm-tinted) */
  --shadow-xs: 0 1px 2px 0 rgb(28 25 23 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(28 25 23 / 0.1), 0 1px 2px -1px rgb(28 25 23 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(28 25 23 / 0.1), 0 2px 4px -2px rgb(28 25 23 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(28 25 23 / 0.1), 0 4px 6px -4px rgb(28 25 23 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(28 25 23 / 0.1), 0 8px 10px -6px rgb(28 25 23 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(28 25 23 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(28 25 23 / 0.05);

  /* Amber glow for interactive elements */
  --shadow-glow-sm: 0 0 10px 0 rgb(245 158 11 / 0.3);
  --shadow-glow-md: 0 0 20px 0 rgb(245 158 11 / 0.4);
  --shadow-glow-lg: 0 0 30px 0 rgb(245 158 11 / 0.5);

  /* Die-specific shadows */
  --shadow-die: 0 2px 4px rgb(28 25 23 / 0.1), 0 4px 8px rgb(28 25 23 / 0.1), 0 8px 16px rgb(28 25 23 / 0.05);
  --shadow-die-held: 0 4px 8px rgb(14 165 233 / 0.2), 0 8px 16px rgb(14 165 233 / 0.15);

  /* =========================================
     Z-INDEX SCALE
     ========================================= */

  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  --z-maximum: 9999;

  /* =========================================
     TRANSITIONS
     ========================================= */

  /* Durations */
  --duration-instant: 0ms;
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
  --duration-slowest: 700ms;

  /* Easings */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Common transition presets */
  --transition-colors: color var(--duration-normal) var(--ease-in-out),
                       background-color var(--duration-normal) var(--ease-in-out),
                       border-color var(--duration-normal) var(--ease-in-out);
  --transition-transform: transform var(--duration-normal) var(--ease-out);
  --transition-all: all var(--duration-normal) var(--ease-in-out);

  /* =========================================
     LAYOUT CONSTRAINTS
     ========================================= */

  /* Container widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;

  /* Game-specific constraints */
  --max-width-scoresheet: 600px;
  --max-width-dice-area: 400px;
  --max-width-game: 900px;

  /* Modal widths */
  --width-modal-sm: 320px;
  --width-modal-md: 480px;
  --width-modal-lg: 640px;

  /* =========================================
     COMPONENT-SPECIFIC TOKENS
     ========================================= */

  /* Die */
  --die-size: 56px;
  --die-size-sm: 40px;
  --die-size-lg: 72px;
  --die-size-xl: 88px;

  /* Buttons */
  --btn-height-sm: 32px;
  --btn-height-md: 40px;
  --btn-height-lg: 48px;
  --btn-height-xl: 56px;

  /* Inputs */
  --input-height: 44px;
}

/* =========================================
   DARK MODE OVERRIDES
   ========================================= */

:root.dark,
[data-theme="dark"] {
  /* Surfaces */
  --color-bg-primary: var(--stone-950);
  --color-bg-secondary: var(--stone-900);
  --color-bg-card: var(--stone-900);
  --color-bg-elevated: var(--stone-800);

  /* Borders */
  --color-border: var(--stone-700);
  --color-border-subtle: var(--stone-800);
  --color-border-strong: var(--stone-600);

  /* Text */
  --color-text-primary: var(--stone-50);
  --color-text-secondary: var(--stone-400);
  --color-text-muted: var(--stone-500);

  /* Brand adjustments for dark mode */
  --color-brand-primary: var(--amber-400);
  --color-brand-hover: var(--amber-300);

  /* Game states */
  --color-available: var(--amber-900);
  --color-filled: var(--stone-800);
  --color-locked: var(--stone-800);

  /* Shadows - more subtle in dark mode */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 6px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px rgb(0 0 0 / 0.5);

  /* Glows are more prominent in dark mode */
  --shadow-glow-sm: 0 0 15px rgb(251 191 36 / 0.4);
  --shadow-glow-md: 0 0 25px rgb(251 191 36 / 0.5);
  --shadow-glow-lg: 0 0 35px rgb(251 191 36 / 0.6);
}

/* =========================================
   MEDIA QUERY HELPERS
   ========================================= */

/* System dark mode preference (when not manually set) */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]) {
    /* Apply dark mode tokens */
    --color-bg-primary: var(--stone-950);
    --color-bg-secondary: var(--stone-900);
    --color-bg-card: var(--stone-900);
    --color-bg-elevated: var(--stone-800);
    --color-border: var(--stone-700);
    --color-text-primary: var(--stone-50);
    --color-text-secondary: var(--stone-400);
    --color-brand-primary: var(--amber-400);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --duration-slowest: 0ms;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --color-border: var(--stone-900);
    --color-border-strong: var(--stone-950);
  }

  :root.dark,
  [data-theme="dark"] {
    --color-border: var(--stone-300);
    --color-border-strong: var(--stone-100);
  }
}

*{box-sizing:border-box}html{color-scheme:light;scroll-behavior:smooth}body{margin:0;background:#fafaf9;color:#1c1917;font-family:var(--font-sans);font-size:17px;line-height:1.7}a{color:#92400e;text-underline-offset:.22em}a:hover{color:#78350f}a:focus-visible,summary:focus-visible{outline:3px solid #0369a1;outline-offset:5px}h1,h2,h3{font-family:var(--font-serif);font-weight:400;line-height:1.15;color:#1c1917}h1{font-size:clamp(2.5rem,6vw,4.6rem);letter-spacing:-.035em;max-width:940px;margin:.4em 0}h2{font-size:clamp(1.8rem,4vw,2.5rem);letter-spacing:-.025em;margin:0 0 .7em}h3{font-size:1.5rem}p{max-width:76ch}main{max-width:1120px;margin:auto;padding:0 28px}section{padding:56px 0;border-bottom:1px solid #e7e5e4}section section{padding:24px 0}header,footer{max-width:1120px;margin:auto;padding:24px 28px;display:flex;gap:24px;justify-content:space-between;align-items:center;flex-wrap:wrap}header{border-bottom:1px solid #e7e5e4}.brand{font-family:var(--font-serif);font-size:1.7rem;text-decoration:none;color:#1c1917;display:flex;align-items:center;gap:10px}.brand img{width:32px;height:32px}nav{display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap;font-size:.94rem}nav a{text-decoration:none}nav a[aria-current=page]{text-decoration:underline}.hero{padding:72px 0 56px;background:radial-gradient(ellipse at 90% 10%,#fef3c7,transparent 58%)}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:700;color:#92400e}.lead{font-size:1.2rem;color:#57534e;max-width:680px}.actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:28px 0 14px}.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:48px;padding:12px 24px;background:#f59e0b;color:#1c1917;border:1px solid #d97706;border-radius:10px;font-weight:700;text-decoration:none}.button:hover{background:#fbbf24;color:#1c1917}.small,footer{font-size:.875rem;color:#57534e}.dice-row{display:flex;gap:12px;margin-top:32px}.die{display:grid;place-items:center;width:64px;height:64px;border-radius:12px;border:1px solid #d6d3d1;background:white;font-family:serif;font-size:54px;line-height:1;box-shadow:0 3px 0 #e7e5e4}.die.held{background:#fef3c7;border-color:#f59e0b;box-shadow:0 3px 0 #fcd34d}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.card{min-width:0;padding:26px;border:1px solid #e7e5e4;border-radius:16px;background:white}.card p{color:#57534e}.step{color:#92400e;font-size:.8rem;font-family:var(--font-mono)}.steps{padding-left:24px}.steps li{padding:8px 0 8px 6px;max-width:78ch}.note{padding:20px 24px;background:#fffbeb;border-left:3px solid #d97706;border-radius:0 10px 10px 0;margin:24px 0}details{border-top:1px solid #e7e5e4;padding:18px 0}summary{cursor:pointer;font-weight:600}details p{color:#57534e}.cta{text-align:center;border:0;padding:64px 0}.cta p{margin:0 auto 24px}.table-wrap{overflow-x:auto;max-width:100%;border:1px solid #d6d3d1;border-radius:12px;margin:24px 0}table{border-collapse:collapse;width:100%;font-size:.95rem;background:white}caption{text-align:left;padding:16px;font-weight:700}th,td{text-align:left;padding:12px 14px;border-bottom:1px solid #e7e5e4}th{background:#fef3c7;color:#1c1917}td{vertical-align:top}tr:last-child td,tr:last-child th{border-bottom:0}figure{margin:24px 0}svg{max-width:100%;height:auto}figcaption{font-size:.9rem;color:#57534e;margin-top:12px}.skip-link{position:absolute;top:-100px;left:16px;background:white;padding:12px;z-index:10}.skip-link:focus{top:8px}footer{border-top:1px solid #e7e5e4;margin-top:24px}footer p{margin:0}section[id],h2[id]{scroll-margin-top:24px}@media(max-width:700px){main,header,footer{padding-left:20px;padding-right:20px}.cards{grid-template-columns:minmax(0,1fr)}.hero{padding-top:40px}section{padding:36px 0}header{gap:16px}nav{gap:12px 18px}.die{width:50px;height:50px;font-size:44px}.dice-row{gap:8px}.lead{font-size:1.08rem}th,td{padding:10px;font-size:.86rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}@media print{header,footer,.actions,.button,.skip-link{display:none}body{font-size:11pt;background:white}main{max-width:none;padding:0}section{padding:16px 0}.hero{background:none;padding:0}h1{font-size:26pt}h2{font-size:18pt}.card,table,figure{break-inside:avoid}a{color:inherit}.cards{grid-template-columns:1fr}}