/* ============================================================
   FitForge — tokens.css
   Design System: Variables, Colors, Typography, Spacing
   Apple-inspired Liquid Glass · Dark Luxury Theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@200;300;400;500;600;700;800&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');

:root {
  /* ── Color Primitives ── */
  --ink-0:   #000000;
  --ink-50:  #080810;
  --ink-100: #0d0d1a;
  --ink-150: #111120;
  --ink-200: #161628;
  --ink-300: #1e1e35;
  --ink-400: #252540;
  --ink-500: #2e2e50;
  --ink-600: #3a3a60;

  --silver-100: #b0b0c8;
  --silver-200: #8888a8;
  --silver-300: #606080;
  --silver-400: #48485e;

  /* ── Brand Palette ── */
  --brand-amber:  #f5821f;
  --brand-amber2: #f9a84d;
  --brand-amber3: #fdc87a;
  --brand-gold:   #d4a84b;
  --brand-gold2:  #ecc97a;
  --brand-fire:   #e85d1a;

  --accent-cyan:    #00d4ff;
  --accent-cyan2:   #7ae7ff;
  --accent-purple:  #9b6dff;
  --accent-purple2: #c4a0ff;
  --accent-green:   #3de8a0;
  --accent-green2:  #7ef5c0;
  --accent-rose:    #ff5f7e;

  /* ── Semantic Tokens (Dark Mode Default) ── */
  --bg-base:       var(--ink-50);
  --bg-surface:    var(--ink-100);
  --bg-elevated:   var(--ink-150);
  --bg-overlay:    var(--ink-200);

  --text-primary:   #f0f0fc;
  --text-secondary: #a0a0c0;
  --text-tertiary:  #606080;
  --text-disabled:  #404060;
  --text-inverse:   #0d0d1a;

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);
  --border-accent:  rgba(245, 130, 31, 0.35);

  /* ── Glass System ── */
  --glass-bg-1:     rgba(255, 255, 255, 0.025);
  --glass-bg-2:     rgba(255, 255, 255, 0.050);
  --glass-bg-3:     rgba(255, 255, 255, 0.080);
  --glass-bg-4:     rgba(255, 255, 255, 0.120);
  --glass-blur-sm:  blur(12px);
  --glass-blur-md:  blur(24px);
  --glass-blur-lg:  blur(40px);
  --glass-blur-xl:  blur(60px);

  /* ── Shadows ── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.30);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.40);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.50);
  --shadow-xl:  0 16px 64px rgba(0,0,0,0.60);
  --shadow-glow-amber: 0 0 40px rgba(245,130,31,0.20);
  --shadow-glow-cyan:  0 0 40px rgba(0,212,255,0.15);
  --shadow-glow-gold:  0 0 40px rgba(212,168,75,0.20);

  /* ── Typography ── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Sora', -apple-system, sans-serif;
  --font-mono:    'DM Mono', 'SF Mono', monospace;

  --text-2xs: 0.625rem;   /* 10px */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.8125rem;  /* 13px */
  --text-base:0.9375rem;  /* 15px */
  --text-md:  1rem;       /* 16px */
  --text-lg:  1.125rem;   /* 18px */
  --text-xl:  1.25rem;    /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */
  --text-5xl: 3rem;       /* 48px */
  --text-6xl: 3.75rem;    /* 60px */

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;

  --weight-thin:       200;
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;

  /* ── Spacing Scale ── */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* ── Radius ── */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl:36px;
  --radius-full: 9999px;

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

  --duration-fast:   120ms;
  --duration-base:   220ms;
  --duration-slow:   380ms;
  --duration-slower: 600ms;

  /* ── Z-Index ── */
  --z-base:    0;
  --z-raised:  10;
  --z-nav:     100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
  --z-supreme: 600;

  /* ── Layout ── */
  --app-max-width:     1280px;
  --content-max:       900px;
  --sidebar-width:     260px;
  --header-height:     64px;
  --bottom-nav-height: 72px;
  --content-padding:   clamp(1rem, 4vw, 2rem);
}

/* ── Light Theme Override ── */
[data-theme="light"] {
  --bg-base:       #f2f2f8;
  --bg-surface:    #e8e8f4;
  --bg-elevated:   #ffffff;
  --bg-overlay:    #f8f8fe;

  --text-primary:   #0d0d1a;
  --text-secondary: #3a3a5a;
  --text-tertiary:  #7878a0;
  --text-disabled:  #b0b0cc;
  --text-inverse:   #f0f0fc;

  --border-subtle:  rgba(0, 0, 0, 0.06);
  --border-default: rgba(0, 0, 0, 0.10);
  --border-strong:  rgba(0, 0, 0, 0.18);

  --glass-bg-1: rgba(255, 255, 255, 0.50);
  --glass-bg-2: rgba(255, 255, 255, 0.70);
  --glass-bg-3: rgba(255, 255, 255, 0.85);
  --glass-bg-4: rgba(255, 255, 255, 0.95);

  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.12);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.16);
  --shadow-xl:  0 16px 64px rgba(0,0,0,0.20);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}