/* ============================================================
   OZI Group — Foundations
   Colors, type, spacing, motion, elevation tokens.
   ============================================================ */

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

:root {
  /* ------------------------------------------------------------
     COLOR — Brand
     Source: OZI Group brand guidelines (1C99BF / 98CBDA / 000 / FFF)
     Extended with a depth-of-field scale for the modernized system.
     ------------------------------------------------------------ */

  /* Primary — Blue Green (the OZI signature) */
  --ozi-blue-green-50:  #E8F6FA;
  --ozi-blue-green-100: #C6E9F1;
  --ozi-blue-green-200: #9BD8E5;
  --ozi-blue-green-300: #66C2D6;
  --ozi-blue-green-400: #3DAFCC;
  --ozi-blue-green-500: #1C99BF; /* canonical */
  --ozi-blue-green-600: #157DA0;
  --ozi-blue-green-700: #0F6580;
  --ozi-blue-green-800: #0A4A60;
  --ozi-blue-green-900: #062F3D;

  /* Secondary — Light Blue */
  --ozi-light-blue-200: #D6E8EF;
  --ozi-light-blue-300: #B8DAE3;
  --ozi-light-blue-400: #98CBDA; /* canonical */
  --ozi-light-blue-500: #7AB8CB;

  /* Neutrals — onyx-to-paper scale used everywhere */
  --ozi-black: #000000;
  --ozi-ink-950: #050507;
  --ozi-ink-900: #0B0D11;
  --ozi-ink-800: #14171D;
  --ozi-ink-700: #1F232C;
  --ozi-ink-600: #2A2F3A;
  --ozi-ink-500: #4A5160;
  --ozi-ink-400: #6F7787;
  --ozi-ink-300: #9CA3B0;
  --ozi-ink-200: #C9CDD4;
  --ozi-ink-100: #E5E7EB;
  --ozi-ink-50:  #F5F6F8;
  --ozi-paper:   #FFFFFF;

  /* Accent / semantic */
  --ozi-cyan-glow:   #4FE0FF;   /* hero-accent neon used sparingly */
  --ozi-amber:       #F5B544;   /* warnings, EV/battery vertical */
  --ozi-emerald:     #34C28A;   /* success, fintech up-states */
  --ozi-rose:        #F25C7C;   /* errors, gaming accent */
  --ozi-violet:      #8B5CF6;   /* AI vertical accent */

  /* ------------------------------------------------------------
     SEMANTIC tokens — use these in components
     ------------------------------------------------------------ */

  /* Surface */
  --bg-canvas:        var(--ozi-paper);
  --bg-elevated:      var(--ozi-ink-50);
  --bg-sunken:        var(--ozi-ink-100);
  --bg-inverse:       var(--ozi-ink-900);
  --bg-brand:         var(--ozi-blue-green-500);
  --bg-brand-soft:    var(--ozi-blue-green-50);

  /* Foreground */
  --fg-primary:       var(--ozi-ink-900);
  --fg-secondary:     var(--ozi-ink-500);
  --fg-muted:         var(--ozi-ink-400);
  --fg-inverse:       var(--ozi-paper);
  --fg-brand:         var(--ozi-blue-green-500);
  --fg-on-brand:      var(--ozi-paper);

  /* Border */
  --border-subtle:    var(--ozi-ink-100);
  --border-default:   var(--ozi-ink-200);
  --border-strong:    var(--ozi-ink-300);
  --border-brand:     var(--ozi-blue-green-500);

  /* ------------------------------------------------------------
     TYPE — Poppins is the canonical brand family
     ------------------------------------------------------------ */
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;
  --fw-black:    900;

  /* Type scale (rem assuming 16px root) */
  --fs-display:  clamp(3.5rem, 7vw, 6.5rem);   /* hero headlines */
  --fs-h1:       clamp(2.5rem, 4.5vw, 4rem);   /* section headers */
  --fs-h2:       clamp(2rem, 3vw, 2.75rem);
  --fs-h3:       1.5rem;
  --fs-h4:       1.25rem;
  --fs-body-lg:  1.125rem;
  --fs-body:     1rem;
  --fs-body-sm:  0.875rem;
  --fs-caption:  0.75rem;
  --fs-overline: 0.6875rem;

  /* Leading & tracking */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --ls-display: -0.03em;
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-overline: 0.18em;

  /* ------------------------------------------------------------
     SPACING — 4pt grid
     ------------------------------------------------------------ */
  --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;
  --space-40: 160px;

  /* ------------------------------------------------------------
     RADII
     ------------------------------------------------------------ */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* ------------------------------------------------------------
     ELEVATION
     ------------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(11, 13, 17, 0.05);
  --shadow-sm: 0 2px 4px rgba(11, 13, 17, 0.06), 0 1px 2px rgba(11, 13, 17, 0.04);
  --shadow-md: 0 8px 24px rgba(11, 13, 17, 0.08), 0 2px 6px rgba(11, 13, 17, 0.04);
  --shadow-lg: 0 20px 48px rgba(11, 13, 17, 0.12), 0 6px 16px rgba(11, 13, 17, 0.06);
  --shadow-xl: 0 32px 80px rgba(11, 13, 17, 0.18);
  --shadow-glow: 0 0 0 1px rgba(28, 153, 191, 0.25), 0 8px 32px rgba(28, 153, 191, 0.22);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* ------------------------------------------------------------
     MOTION
     ------------------------------------------------------------ */
  --ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
  --dur-xslow:  720ms;

  /* ------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------ */
  --container-max: 1280px;
  --container-pad: clamp(20px, 4vw, 48px);
  --section-pad-y: clamp(80px, 12vw, 160px);
}

/* ============================================================
   SEMANTIC TYPE CLASSES — use directly on elements
   ============================================================ */

.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}
.t-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-normal);
}
.t-body-lg {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
}
.t-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}
.t-body-sm {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
}
.t-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.t-overline {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-overline);
  line-height: 1;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--fg-brand);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-normal);
}

/* ============================================================
   BASE RESET — apply to anything using this stylesheet
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }