/* ========================================================================
   LOCKIN.TECH — Design Tokens
   Dark-cinema meets academic precision
   ======================================================================== */

:root {
  /* ─── Brand Colours ──────────────────────────── */
  --c-bg:           #060E1A;
  --c-bg-1:         #0B1829;
  --c-bg-2:         #0F2035;
  --c-bg-3:         #193659;

  --c-primary:      #3678AE;
  --c-primary-light:#4a8fc4;
  --c-primary-dark: #2a5f8a;

  --c-accent:       #53C0B8;
  --c-accent-light: #6fd4cc;
  --c-accent-glow:  rgba(83, 192, 184, 0.25);

  --c-white:        #FFFFFF;
  --c-text:         #E8EEF4;
  --c-text-muted:   #94A3B8;
  --c-text-subtle:  #5C6B82;

  --c-border:       rgba(255,255,255,0.08);
  --c-border-bright:rgba(255,255,255,0.16);

  --c-success:      #10B981;
  --c-warning:      #F59E0B;
  --c-error:        #EF4444;

  /* RGB versions for rgba() */
  --c-accent-rgb:   83, 192, 184;
  --c-primary-rgb:  54, 120, 174;
  --c-bg-rgb:       6, 14, 26;

  /* ─── Gradients ──────────────────────────────── */
  --grad-hero:      radial-gradient(ellipse at top, #0F2035 0%, #060E1A 60%);
  --grad-teal:      linear-gradient(135deg, #3678AE 0%, #53C0B8 100%);
  --grad-text:      linear-gradient(135deg, #FFFFFF 0%, #53C0B8 100%);
  --grad-card:      linear-gradient(145deg, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0.01) 100%);

  /* ─── Spacing ────────────────────────────────── */
  --sp-1: 0.25rem;   --sp-2: 0.5rem;    --sp-3: 0.75rem;
  --sp-4: 1rem;      --sp-5: 1.25rem;   --sp-6: 1.5rem;
  --sp-8: 2rem;      --sp-10: 2.5rem;   --sp-12: 3rem;
  --sp-16: 4rem;     --sp-20: 5rem;     --sp-24: 6rem;
  --sp-32: 8rem;

  /* ─── Layout ─────────────────────────────────── */
  --max-w:         1280px;
  --max-w-text:    720px;
  --gutter:        clamp(1.25rem, 4vw, 2.5rem);

  /* ─── Radius ─────────────────────────────────── */
  --r-sm:   0.375rem;
  --r-md:   0.75rem;
  --r-lg:   1.25rem;
  --r-xl:   2rem;
  --r-full: 9999px;

  /* ─── Type ───────────────────────────────────── */
  --font-display: 'Clash Display', 'Inter', system-ui, sans-serif;
  --font-body:    'Cabinet Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --t-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.8125rem);
  --t-sm:   clamp(0.875rem, 0.82rem + 0.27vw, 0.9375rem);
  --t-base: clamp(1rem,     0.94rem + 0.3vw,  1.0625rem);
  --t-lg:   clamp(1.125rem, 1.04rem + 0.42vw, 1.25rem);
  --t-xl:   clamp(1.25rem,  1.1rem  + 0.75vw, 1.5rem);
  --t-2xl:  clamp(1.5rem,   1.25rem + 1.25vw, 1.875rem);
  --t-3xl:  clamp(2rem,     1.6rem  + 2vw,    2.75rem);
  --t-4xl:  clamp(2.5rem,   1.9rem  + 3vw,    3.75rem);
  --t-5xl:  clamp(3.25rem,  2.4rem  + 4.25vw, 5.5rem);
  --t-6xl:  clamp(4rem,     2.8rem  + 6vw,    7.5rem);

  /* ─── Shadows ────────────────────────────────── */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.55);
  --shadow-accent: 0 0 60px rgba(83,192,184,0.22);
  --shadow-glow:   0 0 120px rgba(83,192,184,0.12);

  /* ─── Transitions ────────────────────────────── */
  --t-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base-t: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-ease-out:cubic-bezier(0.16, 1, 0.3, 1);

  /* ─── Z-Index ────────────────────────────────── */
  --z-base: 1;
  --z-above: 10;
  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;
}