/* ============================================================
   COBALT LAUNCHER — Design tokens
   Ported from the Cobalt Launcher design system
   (colors_and_type.css). Dark theme is the default and only
   theme used on the marketing site.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap');

:root {
  /* --- Backgrounds --- */
  --color-bg-darkest: #05060c;
  --color-bg-dark:    #060712;
  --color-bg:         #080815;
  --color-bg-light:   #0c0d1a;

  /* --- Surfaces --- */
  --color-surface-0: #04040b;
  --color-surface-1: #05050d;
  --color-surface-2: #07080f;
  --color-surface-3: #0a0b14;
  --color-surface-4: #0d0f1a;
  --color-surface-5: #111326;

  /* --- Accent (Cobalt Blue) --- */
  --color-accent:        #3b4275;
  --color-accent-hover:  #2c2c5e;
  --color-accent-light:  #50588e;
  --color-accent-strong: #5e6998;
  --color-accent-muted:  #292c4a;
  --color-accent-glow:   rgba(59, 66, 117, 0.35);

  /* --- Status --- */
  --color-success: #4f8a6f;
  --color-info:    #4a6b96;
  --color-danger:  #bb4242;
  --color-warning: #bba142;

  /* --- Text --- */
  --color-text:       #ffffff;
  --color-text-dim:   #aeb4c8;
  --color-text-muted: #80849a;

  /* --- Borders --- */
  --color-border:        #191a25;
  --color-border-strong: #242634;
  --color-outline:       #2a2d45;
  --color-outline-accent:#3b4275;

  /* --- Greys --- */
  --color-gray-100: #12121a; --color-gray-200: #1a1a24; --color-gray-300: #262634;
  --color-gray-400: #343445; --color-gray-500: #45455a; --color-gray-600: #5a5a73;
  --color-gray-700: #74748f; --color-gray-800: #9b9fb6; --color-gray-900: #d0d3e2;

  /* --- Glass --- */
  --color-glass-dark:  rgba(9, 10, 20, 0.85);
  --color-glass-light: rgba(15, 16, 28, 0.6);
  --glass-border-soft: rgba(59, 66, 117, 0.12);

  /* --- Derived mixes (from app) --- */
  --muted-a: color-mix(in srgb, var(--color-accent-muted) 48%, var(--color-surface-2));
  --muted-b: color-mix(in srgb, var(--color-surface-3) 60%, var(--color-surface-2) 40%);
  --muted-c: color-mix(in srgb, var(--color-surface-1) 65%, var(--color-surface-2) 35%);

  /* --- Button tones (from app) --- */
  --btn-tone-1: color-mix(in srgb, var(--color-surface-3) 45%, var(--color-surface-1));
  --btn-tone-1-hover: color-mix(in srgb, var(--color-surface-3) 55%, var(--color-surface-1));
  --btn-tone-1-active: color-mix(in srgb, var(--color-surface-3) 65%, var(--color-surface-1));
  --btn-grad: linear-gradient(90deg, var(--btn-tone-1) 0%, var(--color-surface-1) 100%);
  --btn-grad-hover: linear-gradient(90deg, var(--btn-tone-1-hover) 0%, var(--color-surface-1) 100%);

  /* --- Semantic aliases --- */
  --bg-page:           var(--color-bg);
  --bg-page-deep:      var(--color-bg-darkest);
  --bg-surface:        var(--color-surface-2);
  --bg-surface-raised: var(--color-surface-3);
  --bg-surface-sunken: var(--color-surface-1);

  --fg-primary:   var(--color-text);
  --fg-secondary: var(--color-text-dim);
  --fg-muted:     var(--color-text-muted);
  --fg-accent:    var(--color-accent-light);

  --bd-subtle:  var(--color-border);
  --bd-default: var(--color-border-strong);
  --bd-accent:  var(--color-outline-accent);

  /* --- Gradients --- */
  --grad-accent: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
  --grad-surface: linear-gradient(145deg, var(--color-surface-1), var(--color-surface-3));
  --grad-hero-overlay: linear-gradient(to top, rgba(0,0,0,0.92), rgba(0,0,0,0.55), transparent);

  /* --- Elevation --- */
  --shadow-sm:    0 2px 4px rgba(0,0,0,0.3);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.5);
  --shadow-xl:    0 12px 40px rgba(0,0,0,0.6);
  --shadow-hover: 0 4px 8px rgba(0,0,0,0.3);
  --shadow-glow:  0 0 18px var(--color-accent-glow);
  --ring-glow:    0 0 0 1px var(--color-outline-accent), 0 0 18px var(--color-accent-glow);

  /* --- Spacing (4px base) --- */
  --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;

  /* --- Radius (sharp HUD edges) --- */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-pill: 3px;
  --radius-circle: 50%;

  /* --- Transitions --- */
  --ease-fast:   0.15s ease-in-out;
  --ease-medium: 0.25s ease-in-out;
  --ease-slow:   0.45s ease-in-out;
  --ease-spring: 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* toned down — no overshoot */

  /* --- Layout --- */
  --nav-height: 64px;
  --content-max: 1180px;
  --blur-strength: 16px;

  /* --- Typography --- */
  --font-base: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fw-regular: 500; --fw-medium: 600; --fw-bold: 700; --fw-black: 800;
  --ls-tight: -0.3px; --ls-wide: 0.3px; --ls-wider: 0.5px; --ls-widest: 1px;

  /* --- Texture --- */
  --scanline: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,0.04) 0px,
    rgba(255,255,255,0.04) 1px,
    transparent 1px,
    transparent 3px
  );
}