/* ============================================================
   MitraMetrik Design System — All Tokens Embedded
   ============================================================ */

/* ── Font Declarations ─────────────────────────────────────── */
@font-face {
  font-family: 'Google Sans Flex';
  src: url('./assets/fonts/GoogleSansFlex.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap');

/* ── Color Tokens ──────────────────────────────────────────── */
:root {
  /* Primary Purple */
  --color-primary-50:  oklch(97%   0.018 278);
  --color-primary-100: oklch(93%   0.048 278);
  --color-primary-200: oklch(86%   0.096 278);
  --color-primary-300: oklch(76%   0.158 278);
  --color-primary-400: oklch(63%   0.218 278);
  --color-primary-500: oklch(49%   0.252 278);
  --color-primary-600: oklch(41%   0.230 278);
  --color-primary-700: oklch(33%   0.192 278);
  --color-primary-800: oklch(25%   0.142 278);
  --color-primary-900: oklch(17%   0.090 278);
  --color-primary-950: oklch(11%   0.058 278);

  /* Accent Teal */
  --color-teal-50:  oklch(97%   0.018 192);
  --color-teal-100: oklch(93%   0.048 192);
  --color-teal-200: oklch(86%   0.094 192);
  --color-teal-300: oklch(76%   0.148 192);
  --color-teal-400: oklch(68%   0.178 192);
  --color-teal-500: oklch(60%   0.192 192);
  --color-teal-600: oklch(50%   0.172 192);
  --color-teal-700: oklch(40%   0.140 192);
  --color-teal-800: oklch(30%   0.102 192);
  --color-teal-900: oklch(20%   0.065 192);
  --color-teal-950: oklch(13%   0.040 192);

  /* Neutral */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  oklch(98%   0.004 278);
  --color-neutral-100: oklch(95%   0.006 278);
  --color-neutral-200: oklch(90%   0.009 278);
  --color-neutral-300: oklch(82%   0.012 278);
  --color-neutral-400: oklch(69%   0.012 278);
  --color-neutral-500: oklch(57%   0.012 278);
  --color-neutral-600: oklch(46%   0.010 278);
  --color-neutral-700: oklch(36%   0.009 278);
  --color-neutral-800: oklch(27%   0.007 278);
  --color-neutral-900: oklch(18%   0.006 278);
  --color-neutral-950: oklch(11%   0.004 278);

  /* Semantic: Success */
  --color-success-50:  oklch(97%   0.024 155);
  --color-success-100: oklch(92%   0.060 155);
  --color-success-400: oklch(66%   0.162 155);
  --color-success-500: oklch(55%   0.168 155);
  --color-success-600: oklch(45%   0.148 155);

  /* Semantic: Warning */
  --color-warning-50:  oklch(98%   0.020 78);
  --color-warning-400: oklch(80%   0.180 78);
  --color-warning-500: oklch(72%   0.188 78);
  --color-warning-600: oklch(62%   0.170 78);

  /* Semantic: Error */
  --color-error-50:  oklch(97%   0.018 18);
  --color-error-400: oklch(66%   0.196 18);
  --color-error-500: oklch(56%   0.218 18);
  --color-error-600: oklch(47%   0.196 18);

  /* Data Visualization */
  --viz-1: oklch(49%  0.252 278);
  --viz-2: oklch(60%  0.192 192);
  --viz-3: oklch(72%  0.188 78);
  --viz-4: oklch(56%  0.218 18);
  --viz-5: oklch(55%  0.168 155);
  --viz-6: oklch(58%  0.210 240);

  /* Semantic Design Tokens — Text */
  --text-primary:    var(--color-neutral-900);
  --text-secondary:  var(--color-neutral-600);
  --text-tertiary:   var(--color-neutral-400);
  --text-inverse:    var(--color-neutral-0);
  --text-brand:      var(--color-primary-500);
  --text-link:       var(--color-primary-600);

  /* Surfaces */
  --surface-base:         var(--color-neutral-0);
  --surface-subtle:       var(--color-neutral-50);
  --surface-muted:        var(--color-neutral-100);
  --surface-brand:        var(--color-primary-500);
  --surface-brand-subtle: var(--color-primary-50);
  --surface-teal:         var(--color-teal-500);

  /* Borders */
  --border-subtle:   var(--color-neutral-200);
  --border-default:  var(--color-neutral-300);
  --border-brand:    var(--color-primary-400);

  /* Brand shortcuts */
  --brand:         var(--color-primary-500);
  --brand-hover:   var(--color-primary-600);
  --brand-active:  var(--color-primary-700);
  --brand-subtle:  var(--color-primary-50);
  --accent:        var(--color-teal-500);
  --accent-hover:  var(--color-teal-600);

  /* Gradients */
  --gradient-brand:      linear-gradient(135deg, var(--color-primary-500), var(--color-teal-500));
  --gradient-brand-deep: linear-gradient(135deg, var(--color-primary-700) 0%, var(--color-primary-500) 50%, var(--color-teal-600) 100%);
  --gradient-hero-bg:    linear-gradient(160deg, var(--color-primary-50) 0%, var(--color-neutral-0) 45%, var(--color-teal-50) 100%);

  /* ── Typography Tokens ───────────────────────────────────── */
  --font-sans:    'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'DM Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-display: 'Google Sans Flex', sans-serif;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;

  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;

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

  --gap-xs:  var(--space-2);
  --gap-sm:  var(--space-3);
  --gap-md:  var(--space-4);
  --gap-lg:  var(--space-6);
  --gap-xl:  var(--space-8);
  --gap-2xl: var(--space-12);

  --container-xl:  1280px;
  --container-2xl: 1440px;
  --header-height: 60px;
  --section-y:     var(--space-24);

  /* ── Effects Tokens ──────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  28px;
  --radius-full: 9999px;

  --radius-button: var(--radius-md);
  --radius-input:  var(--radius-md);
  --radius-card:   var(--radius-xl);
  --radius-badge:  var(--radius-full);
  --radius-dialog: var(--radius-2xl);

  --shadow-xs:  0 1px 2px oklch(0% 0 0 / 0.04);
  --shadow-sm:  0 1px 3px oklch(0% 0 0 / 0.08), 0 1px 2px oklch(0% 0 0 / 0.04);
  --shadow-md:  0 4px 8px oklch(0% 0 0 / 0.08), 0 2px 4px oklch(0% 0 0 / 0.04);
  --shadow-lg:  0 8px 20px oklch(0% 0 0 / 0.10), 0 3px 6px oklch(0% 0 0 / 0.05);
  --shadow-xl:  0 20px 40px oklch(0% 0 0 / 0.12), 0 6px 12px oklch(0% 0 0 / 0.06);

  --shadow-glow-sm:   0 0 12px oklch(49% 0.252 278 / 0.20);
  --shadow-glow-md:   0 0 24px oklch(49% 0.252 278 / 0.28), 0 4px 16px oklch(49% 0.252 278 / 0.12);
  --shadow-glow-lg:   0 0 40px oklch(49% 0.252 278 / 0.32), 0 8px 24px oklch(49% 0.252 278 / 0.16);
  --shadow-glow-teal: 0 0 24px oklch(60% 0.192 192 / 0.28), 0 4px 16px oklch(60% 0.192 192 / 0.12);

  --ease-default: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring:  cubic-bezier(0.22, 1.0, 0.36, 1.0);

  --duration-fast:   150ms;
  --duration-base:   200ms;
  --duration-slow:   350ms;

  --blur-sm:  4px;
  --blur-md:  8px;
  --blur-lg:  16px;
  --blur-xl:  32px;

  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ── Dark mode token overrides ─────────────────────────── */
[data-theme=dark] {
  /* Neutral surfaces flip so text/hover colors are legible on dark bg */
  --color-neutral-50:  oklch(18% 0.006 278);
  --color-neutral-100: oklch(24% 0.007 278);
  --color-neutral-200: oklch(32% 0.008 278);
  --color-neutral-700: oklch(76% 0.012 278);
  --color-neutral-900: oklch(94% 0.006 278);

  /* Primary subtle surfaces flip for secondary/outline buttons */
  --color-primary-50:  oklch(17% 0.058 278);
  --color-primary-100: oklch(25% 0.100 278);
  --color-primary-200: oklch(33% 0.150 278);
  --color-primary-300: oklch(41% 0.200 278);
  --color-primary-700: oklch(76% 0.158 278);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); }