/* /var/www/e3/website/css/tokens.css — Design tokens. Dark-only. Green-only. */

:root {
  color-scheme: dark;

  /* Greens — the whole system */
  --green-50:  #e8fff1;
  --green-100: #c3fddc;
  --green-200: #8ff7bb;
  --green-300: #6ef0a0;
  --green-400: #4ddc85;
  --green-500: #34c46f;
  --green-600: #1ea356;
  --green-700: #0f6b36;
  --green-800: #0a4a25;
  --green-900: #05220f;

  /* Backgrounds — pure black + green-tinted blacks (NO gray, ever) */
  --bg:          #000000;
  --surface-0:   color-mix(in oklab, var(--green-500) 3%, #000);
  --surface-1:   color-mix(in oklab, var(--green-500) 6%, #000);
  --surface-2:   color-mix(in oklab, var(--green-500) 10%, #000);
  --surface-3:   color-mix(in oklab, var(--green-500) 14%, #000);

  /* Text */
  --text:        var(--green-50);
  --text-dim:    var(--green-300);
  --text-muted:  color-mix(in oklab, var(--green-300) 60%, #000);

  /* Borders */
  --border:       color-mix(in oklab, var(--green-500) 24%, #000);
  --border-strong: color-mix(in oklab, var(--green-500) 40%, #000);

  /* Shadows & glows */
  --glow:        0 0 24px rgba(52, 196, 111, 0.45);
  --glow-soft:   0 0 12px rgba(52, 196, 111, 0.22);
  --glow-strong: 0 0 40px rgba(110, 240, 160, 0.55);
  --shadow-3d:   0 1px 0 rgba(110, 240, 160, 0.35) inset,
                 0 -1px 0 rgba(0, 0, 0, 0.6) inset,
                 0 8px 24px rgba(0, 0, 0, 0.7),
                 0 2px 4px rgba(0, 0, 0, 0.9);
  --shadow-card: 0 1px 0 rgba(110, 240, 160, 0.18) inset,
                 0 30px 60px -30px rgba(0, 0, 0, 0.9),
                 0 10px 30px -10px rgba(0, 0, 0, 0.8);

  /* Gradients */
  --g-btn:       linear-gradient(180deg, var(--green-400) 0%, var(--green-600) 55%, var(--green-700) 100%);
  --g-btn-hover: linear-gradient(180deg, var(--green-300) 0%, var(--green-500) 55%, var(--green-600) 100%);
  --g-ribbon:    linear-gradient(135deg, var(--green-500), var(--green-700));
  --g-radial:    radial-gradient(1200px 600px at 50% -10%, rgba(52,196,111,.18), transparent 60%);

  /* Geometry */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  /* Layering */
  --z-particles: 0;
  --z-base:      1;
  --z-card:      2;
  --z-glass:     3;
  --z-ribbon:    4;
  --z-nav:       10;

  /* Motion */
  --blur:      14px;
  --blur-lg:   22px;
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --fast:      180ms;
  --medium:    360ms;
  --slow:      720ms;
}