/**
 * Itzune Design System — Tokens
 * Based on the Midjourney bioluminescent terminal reference,
 * adapted to Itzune's logo palette:
 *   Magenta #e91e8c · Sky Blue #4bb8e8 · Orange #f07030 · Amber #f5a020 · Purple #8b35b8
 */

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

:root {
  /* ─── Surfaces (dark range, logo background matches Cosmic Void) ─── */
  --color-cosmic-void:       #06051d;
  --color-deep-navy:         #061434;
  --color-abyssal-blue:      #0f1c36;
  --color-steel-navy:        #1d293d;
  --color-deep-slate:        #314062;

  /* ─── Gradients ─── */
  --gradient-cosmic-void: linear-gradient(0deg, rgb(6, 5, 29) 30%, rgb(6, 20, 52));

  /* ─── Neutrals ─── */
  --color-mist:        #cad5e2;   /* primary body text */
  --color-fog:         #e5e7eb;   /* borders / dividers */
  --color-ash:         #2e3038;   /* subdued labels */
  --color-ghost-white: #ffffff;   /* heading text */
  --color-ice-blue:    #ebf8ff;   /* high-brightness text on dark */

  /* ─── Itzune Accent Palette (sourced from logo) ─── */
  --color-itzune-sky:     #4bb8e8;   /* sky-blue branches → inline links, Explore pill text */
  --color-itzune-magenta: #e91e8c;   /* hot-pink nodes → Sign Up pill text, icons */
  --color-itzune-orange:  #f07030;   /* orange branches → section icon strokes */
  --color-itzune-amber:   #f5a020;   /* amber nodes → Contact/secondary CTA text */
  --color-itzune-purple:  #8b35b8;   /* violet nodes → decorative accent */
  --color-itzune-red:     #e84832;   /* orange-red → error / fault accent */

  /* ─── Specimen pill backgrounds (20% opacity tints) ─── */
  --color-pill-magenta-bg:  #6b0845;   /* Sign Up pill bg base (shown at 20% opacity) */
  --color-pill-sky-bg:      #0a3a5a;   /* Explore pill bg base */
  --color-pill-amber-bg:    #5a2800;   /* Contact pill bg base */

  /* ─── Legacy token aliases (for drop-in compatibility) ─── */
  --color-portal-blue:          var(--color-itzune-sky);
  --color-specimen-green:       var(--color-itzune-magenta);
  --color-warning-amber:        var(--color-itzune-orange);
  --color-fault-red:            var(--color-itzune-red);
  --color-bioluminescent-green: var(--color-pill-magenta-bg);
  --color-terminal-amber:       var(--color-pill-sky-bg);
  --color-crimson-depth:        var(--color-pill-amber-bg);

  /* ─── Typography ─── */
  --font-jetbrains-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-dm-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Type scale */
  --text-caption:   14px;
  --leading-caption: 1.63;
  --text-body:      16px;
  --leading-body:   1.5;
  --text-heading:   30px;
  --leading-heading: 1.25;

  /* Weights */
  --font-weight-regular: 400;
  --font-weight-medium:  500;

  /* ─── Spacing (8px base unit) ─── */
  --spacing-unit: 8px;
  --spacing-8:    8px;
  --spacing-16:  16px;
  --spacing-24:  24px;
  --spacing-32:  32px;
  --spacing-48:  48px;
  --spacing-64:  64px;

  /* ─── Layout ─── */
  --page-max-width: 800px;
  --section-gap:     64px;
  --card-padding:    32px;
  --element-gap:     16px;

  /* ─── Border radius ─── */
  --radius-sm:      4px;
  --radius-lg:      8px;     /* cards, images, inputs */
  --radius-full: 9999px;     /* pill buttons */

  /* Named aliases */
  --radius-cards:   var(--radius-lg);
  --radius-images:  var(--radius-lg);
  --radius-inputs:  var(--radius-lg);
  --radius-buttons: var(--radius-full);

  /* ─── Shadows ─── */
  --shadow-sm:
    rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;

  /* ─── Surfaces (shorthand aliases) ─── */
  --surface-0: var(--color-cosmic-void);
  --surface-1: var(--color-deep-navy);
  --surface-2: var(--color-abyssal-blue);
  --surface-3: var(--color-steel-navy);
  --surface-4: var(--color-deep-slate);
}