@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  
  --brand-50:  oklch(0.975 0.012 268);
  --brand-100: oklch(0.945 0.025 268);
  --brand-200: oklch(0.885 0.055 268);
  --brand-300: oklch(0.795 0.095 268);
  --brand-400: oklch(0.680 0.140 268);
  --brand-500: oklch(0.560 0.175 268);
  --brand-600: oklch(0.455 0.180 268); 
  --brand-700: oklch(0.380 0.155 268);
  --brand-800: oklch(0.300 0.115 268);
  --brand-900: oklch(0.220 0.080 268);
  --brand-950: oklch(0.150 0.050 268);

  
  --mint-50:  oklch(0.970 0.020 175);
  --mint-100: oklch(0.935 0.040 175);
  --mint-200: oklch(0.870 0.075 175);
  --mint-300: oklch(0.790 0.105 175);
  --mint-400: oklch(0.720 0.115 175);
  --mint-500: oklch(0.640 0.115 175);
  --mint-600: oklch(0.540 0.105 175);
  --mint-700: oklch(0.435 0.085 175);

  
  --orange-50:  oklch(0.975 0.018 62);
  --orange-100: oklch(0.945 0.045 60);
  --orange-200: oklch(0.890 0.085 58);
  --orange-300: oklch(0.820 0.125 56);
  --orange-400: oklch(0.745 0.150 55);
  --orange-500: oklch(0.685 0.170 55); 
  --orange-600: oklch(0.620 0.165 55);
  --orange-700: oklch(0.540 0.150 55);
  --orange-800: oklch(0.450 0.130 55);
  --orange-900: oklch(0.350 0.100 55);

  
  --sand-100: oklch(0.960 0.018 70);
  --sand-300: oklch(0.870 0.055 70);
  --sand-500: oklch(0.730 0.100 60);

  
  --gray-0:    #ffffff;
  --gray-25:   oklch(0.990 0.003 270);
  --gray-50:   oklch(0.980 0.005 270);
  --gray-75:   oklch(0.970 0.006 270);
  --gray-100:  oklch(0.955 0.008 270);
  --gray-200:  oklch(0.920 0.010 270);
  --gray-300:  oklch(0.870 0.012 270);
  --gray-400:  oklch(0.760 0.014 270);
  --gray-500:  oklch(0.620 0.016 270);
  --gray-600:  oklch(0.500 0.018 270);
  --gray-700:  oklch(0.395 0.018 270);
  --gray-800:  oklch(0.295 0.018 270);
  --gray-900:  oklch(0.205 0.018 270);
  --gray-950:  oklch(0.135 0.018 270);
  --gray-1000: oklch(0.085 0.018 270);

  
  --success: oklch(0.620 0.130 155);
  --warning: oklch(0.760 0.140 80);
  --danger:  oklch(0.580 0.190 25);
  --info:    oklch(0.620 0.140 230);

  
  --bg:           var(--gray-25);
  --bg-elevated:  var(--gray-0);
  --bg-subtle:    var(--gray-75);
  --bg-muted:     var(--gray-100);
  --bg-inverse:   var(--gray-950);

  --fg:           var(--gray-950);
  --fg-muted:     var(--gray-700);
  --fg-subtle:    var(--gray-500);
  --fg-disabled:  var(--gray-400);
  --fg-inverse:   var(--gray-0);

  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --border-focus:  var(--brand-600);

  
  --primary:        var(--brand-600);
  --primary-hover:  var(--brand-700);
  --primary-text:   var(--gray-0);

  --accent:         var(--orange-500);
  --accent-hover:   var(--orange-600);
  --accent-text:    var(--gray-0);

  
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  62px;
  --text-6xl:  80px;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.011em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius:     10px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  
  --shadow-xs: 0 1px 2px rgba(15, 18, 40, 0.05);
  --shadow-sm: 0 1px 2px rgba(15, 18, 40, 0.04), 0 1px 3px rgba(15, 18, 40, 0.06);
  --shadow-md: 0 2px 4px rgba(15, 18, 40, 0.04), 0 6px 14px rgba(15, 18, 40, 0.07);
  --shadow-lg: 0 4px 8px rgba(15, 18, 40, 0.04), 0 16px 32px rgba(15, 18, 40, 0.09);
  --shadow-xl: 0 8px 16px rgba(15, 18, 40, 0.05), 0 28px 56px rgba(15, 18, 40, 0.12);
  --ring-focus: 0 0 0 3px color-mix(in oklab, var(--brand-600) 28%, transparent);
  --ring-accent: 0 0 0 3px color-mix(in oklab, var(--orange-500) 32%, transparent);

  
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-1: 120ms;
  --duration-2: 200ms;
  --duration-3: 320ms;

  
  --container: 1200px;
  --container-narrow: 880px;
}


:root[data-theme="dark"] {
  --bg:           var(--gray-1000);
  --bg-elevated:  oklch(0.165 0.020 270);
  --bg-subtle:    oklch(0.115 0.018 270);
  --bg-muted:     oklch(0.190 0.020 270);
  --bg-inverse:   var(--gray-0);

  --fg:           oklch(0.975 0.005 270);
  --fg-muted:     oklch(0.760 0.014 270);
  --fg-subtle:    oklch(0.580 0.018 270);
  --fg-disabled:  oklch(0.420 0.018 270);
  --fg-inverse:   var(--gray-950);

  --border:        oklch(0.235 0.020 270);
  --border-strong: oklch(0.310 0.020 270);

  --primary:        var(--brand-400);
  --primary-hover:  var(--brand-300);
  --primary-text:   var(--gray-950);

  --accent:         var(--orange-400);
  --accent-hover:   var(--orange-300);
  --accent-text:    var(--gray-950);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 6px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 16px 32px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.4), 0 28px 56px rgba(0, 0, 0, 0.6);
  --ring-focus: 0 0 0 3px color-mix(in oklab, var(--brand-400) 30%, transparent);
}


*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: light dark; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
p { margin: 0; }
a { color: inherit; text-decoration: none; transition: color var(--duration-1) var(--ease-out); }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: color-mix(in oklab, var(--brand-600) 25%, transparent); }
:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: 4px; }