/**
 * VeloBits — Design Tokens
 * ========================
 * Single source of truth for all colours, typography, spacing,
 * shadows and motion used across every VeloBits sub-site.
 *
 * Usage:  import this file (or copy the :root block) into each sub-app.
 * Dark-mode tokens are applied automatically via the
 * [data-theme="dark"] attribute on <html>.
 */

/* ─────────────────────────────────────────────
   COLOUR PALETTE (raw scale — do not use directly)
   ───────────────────────────────────────────── */
:root {
  /* Cyan — primary brand colour */
  --vk-cyan-50:  #ECFEFF;
  --vk-cyan-100: #CFFAFE;
  --vk-cyan-200: #A5F3FC;
  --vk-cyan-300: #67E8F9;
  --vk-cyan-400: #22D3EE;
  --vk-cyan-500: #06B6D4;   /* ← primary */
  --vk-cyan-600: #0891B2;
  --vk-cyan-700: #0E7490;
  --vk-cyan-800: #155E75;
  --vk-cyan-900: #164E63;
  --vk-cyan-950: #083344;

  /* Amber — accent / CTA */
  --vk-amber-50:  #FFFBEB;
  --vk-amber-100: #FEF3C7;
  --vk-amber-200: #FDE68A;
  --vk-amber-300: #FCD34D;
  --vk-amber-400: #FBBF24;
  --vk-amber-500: #F59E0B;   /* ← accent */
  --vk-amber-600: #D97706;
  --vk-amber-700: #B45309;
  --vk-amber-800: #92400E;
  --vk-amber-900: #78350F;

  /* Slate — neutral / backgrounds (kept for component references) */
  --vk-slate-50:  #F8FAFC;
  --vk-slate-100: #F1F5F9;
  --vk-slate-200: #E2E8F0;
  --vk-slate-300: #CBD5E1;
  --vk-slate-400: #94A3B8;
  --vk-slate-500: #64748B;
  --vk-slate-600: #475569;
  --vk-slate-700: #334155;
  --vk-slate-800: #1E293B;
  --vk-slate-900: #0F172A;
  --vk-slate-950: #020617;

  /* Solarized Light palette */
  --vk-sol-base3:  #FDF6E3;  /* lightest — page background */
  --vk-sol-base2:  #EEE8D5;  /* surface */
  --vk-sol-base1:  #D5C9A8;  /* surface-2 */
  --vk-sol-base0:  #93A1A1;  /* muted text / borders */
  --vk-sol-base00: #657B83;  /* secondary text */
  --vk-sol-base01: #586E75;  /* primary text (lighter) */
  --vk-sol-base02: #073642;  /* unused in light */
  --vk-sol-base03: #002B36;  /* darkest */

  /* Solarized Dark palette */
  --vk-sol-dark-base03: #002B36;  /* darkest — page background */
  --vk-sol-dark-base02: #073642;  /* surface */
  --vk-sol-dark-base01: #586E75;  /* surface-2 */
  --vk-sol-dark-base00: #657B83;  /* surface-3 / muted */
  --vk-sol-dark-base0:  #839496;  /* secondary text */
  --vk-sol-dark-base1:  #93A1A1;  /* primary text */
  --vk-sol-dark-base2:  #EEE8D5;  /* on-dark emphasis */
  --vk-sol-dark-base3:  #FDF6E3;  /* on-dark bright */

  /* Semantic success / warning / error */
  --vk-green-500: #22C55E;
  --vk-red-500:   #EF4444;
  --vk-orange-500: #F97316;
}

/* ─────────────────────────────────────────────
   SEMANTIC TOKENS — LIGHT MODE (default)
   Solarized Light: warm cream/yellowish base
   ───────────────────────────────────────────── */
:root,
[data-theme="light"] {

  /* Backgrounds — Solarized Light warm cream */
  --vk-bg-base:       var(--vk-sol-base3);   /* #FDF6E3 warm cream */
  --vk-bg-surface:    var(--vk-sol-base2);   /* #EEE8D5 warm surface */
  --vk-bg-surface-2:  var(--vk-sol-base1);   /* #D5C9A8 deeper surface */
  --vk-bg-surface-3:  #C8BC99;               /* even deeper, for hover */

  /* Text — Solarized Light text values */
  --vk-text-primary:   #3D3220;              /* warm dark brown for strong contrast */
  --vk-text-secondary: var(--vk-sol-base00); /* #657B83 medium contrast */
  --vk-text-muted:     var(--vk-sol-base0);  /* #93A1A1 low contrast / muted */
  --vk-text-on-brand:  #FFFFFF;

  /* Brand */
  --vk-brand-primary:         var(--vk-cyan-600);  /* #0891B2 — deeper cyan for warm bg */
  --vk-brand-primary-hover:   var(--vk-cyan-700);  /* #0E7490 */
  --vk-brand-primary-subtle:  color-mix(in srgb, var(--vk-cyan-600) 10%, var(--vk-sol-base3));
  --vk-brand-accent:          var(--vk-amber-500); /* #F59E0B */
  --vk-brand-accent-hover:    var(--vk-amber-600); /* #D97706 */

  /* Borders — warm tinted */
  --vk-border:        var(--vk-sol-base1);   /* #D5C9A8 */
  --vk-border-strong: var(--vk-sol-base0);   /* #93A1A1 */
  --vk-border-brand:  var(--vk-cyan-300);

  /* Shadows — slightly warmer tint */
  --vk-shadow-sm:  0 1px 3px 0 rgb(61 50 32 / 0.08),  0 1px 2px -1px rgb(61 50 32 / 0.08);
  --vk-shadow-md:  0 4px 6px -1px rgb(61 50 32 / 0.10), 0 2px 4px -2px rgb(61 50 32 / 0.10);
  --vk-shadow-lg:  0 10px 15px -3px rgb(61 50 32 / 0.10), 0 4px 6px -4px rgb(61 50 32 / 0.10);
  --vk-shadow-xl:  0 20px 25px -5px rgb(61 50 32 / 0.12), 0 8px 10px -6px rgb(61 50 32 / 0.12);

  /* Brand glow for buttons / focus rings */
  --vk-glow-brand:  0 0 0 3px rgb(8 145 178 / 0.28);
  --vk-glow-accent: 0 0 0 3px rgb(245 158 11 / 0.28);
}

/* ─────────────────────────────────────────────
   SEMANTIC TOKENS — DARK MODE
   Solarized Dark: pleasant blue-grey, never pure black
   Applies when user explicitly selects dark mode via [data-theme="dark"]
   ───────────────────────────────────────────── */
[data-theme="dark"] {
  /* Backgrounds — Solarized Dark blue-grey */
  --vk-bg-base:       var(--vk-sol-dark-base03);  /* #002B36 deep teal-grey */
  --vk-bg-surface:    var(--vk-sol-dark-base02);  /* #073642 surface */
  --vk-bg-surface-2:  var(--vk-sol-dark-base01);  /* #586E75 elevated */
  --vk-bg-surface-3:  var(--vk-sol-dark-base00);  /* #657B83 most elevated */

  /* Text */
  --vk-text-primary:   var(--vk-sol-dark-base3);  /* #FDF6E3 cream white */
  --vk-text-secondary: var(--vk-sol-dark-base1);  /* #93A1A1 medium */
  --vk-text-muted:     var(--vk-sol-dark-base0);  /* #839496 muted */
  --vk-text-on-brand:  #FFFFFF;

  /* Brand — brighter cyan pops on dark teal-grey */
  --vk-brand-primary:         var(--vk-cyan-400);  /* #22D3EE */
  --vk-brand-primary-hover:   var(--vk-cyan-300);
  --vk-brand-primary-subtle:  color-mix(in srgb, var(--vk-cyan-400) 12%, var(--vk-sol-dark-base02));
  --vk-brand-accent:          var(--vk-amber-400); /* #FBBF24 */
  --vk-brand-accent-hover:    var(--vk-amber-300);

  /* Borders */
  --vk-border:        var(--vk-sol-dark-base01);  /* #586E75 */
  --vk-border-strong: var(--vk-sol-dark-base00);  /* #657B83 */
  --vk-border-brand:  color-mix(in srgb, var(--vk-cyan-400) 40%, var(--vk-sol-dark-base02));

  /* Shadows */
  --vk-shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.25),  0 1px 2px -1px rgb(0 0 0 / 0.25);
  --vk-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -2px rgb(0 0 0 / 0.35);
  --vk-shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
  --vk-shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5);

  --vk-glow-brand:  0 0 0 3px rgb(34 211 238 / 0.32);
  --vk-glow-accent: 0 0 0 3px rgb(251 191 36 / 0.32);
}

/* ─────────────────────────────────────────────
   TYPOGRAPHY
   ───────────────────────────────────────────── */
:root {
  /* Font families */
  --vk-font-sans:  'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;
  --vk-font-mono:  'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Type scale */
  --vk-text-xs:   0.75rem;   /*  12px */
  --vk-text-sm:   0.875rem;  /*  14px */
  --vk-text-base: 1rem;      /*  16px */
  --vk-text-lg:   1.125rem;  /*  18px */
  --vk-text-xl:   1.25rem;   /*  20px */
  --vk-text-2xl:  1.5rem;    /*  24px */
  --vk-text-3xl:  1.875rem;  /*  30px */
  --vk-text-4xl:  2.25rem;   /*  36px */
  --vk-text-5xl:  3rem;      /*  48px */
  --vk-text-6xl:  3.75rem;   /*  60px */

  /* Line heights */
  --vk-leading-tight:   1.25;
  --vk-leading-snug:    1.375;
  --vk-leading-normal:  1.5;
  --vk-leading-relaxed: 1.625;

  /* Font weights */
  --vk-font-light:    300;
  --vk-font-normal:   400;
  --vk-font-medium:   500;
  --vk-font-semibold: 600;
  --vk-font-bold:     700;
  --vk-font-extrabold: 800;
}

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

/* ─────────────────────────────────────────────
   BORDER RADIUS
   ───────────────────────────────────────────── */
:root {
  --vk-radius-sm:   0.25rem;  /*  4px */
  --vk-radius-md:   0.5rem;   /*  8px */
  --vk-radius-lg:   0.75rem;  /* 12px */
  --vk-radius-xl:   1rem;     /* 16px */
  --vk-radius-2xl:  1.5rem;   /* 24px */
  --vk-radius-full: 9999px;
}

/* ─────────────────────────────────────────────
   MOTION / ANIMATION
   ───────────────────────────────────────────── */
:root {
  --vk-duration-fast:   150ms;
  --vk-duration-base:   200ms;
  --vk-duration-slow:   300ms;
  --vk-duration-slower: 500ms;

  --vk-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --vk-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --vk-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --vk-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root {
    --vk-duration-fast:   0ms;
    --vk-duration-base:   0ms;
    --vk-duration-slow:   0ms;
    --vk-duration-slower: 0ms;
  }
}

/* ─────────────────────────────────────────────
   Z-INDEX SCALE
   ───────────────────────────────────────────── */
:root {
  --vk-z-base:    0;
  --vk-z-raised:  10;
  --vk-z-overlay: 100;
  --vk-z-modal:   200;
  --vk-z-toast:   300;
  --vk-z-tooltip: 400;
}

/* ─────────────────────────────────────────────
   LAYOUT
   ───────────────────────────────────────────── */
:root {
  --vk-container-sm:  640px;
  --vk-container-md:  768px;
  --vk-container-lg:  1024px;
  --vk-container-xl:  1280px;
  --vk-container-2xl: 1536px;

  /* Nav heights */
  --vk-nav-height:    60px;
  --vk-nav-height-md: 72px;
}