/* ════════════════════════════════════════════════════════════════
   eve-auth — Design System Tokens
   Two surfaces share the same accent and dark base:
     • App surface    — utilitarian dashboard (members, fleets, structures, …)
     • Public surface — marketing/login HUD with corp crest
   Raw vars are the palette; semantic vars are how product code should
   reference them. Prefer semantic vars in components.
   Accent: "Wardec crimson" — chosen 2026-08-02.
   ════════════════════════════════════════════════════════════════ */

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

:root {
  /* ── Raw: Backgrounds (dark, layered cool-warm grayscale) ─────── */
  --bg-0: #0e0e0e;          /* deepest — beneath everything (public hero, modal scrim base) */
  --bg-1: #141414;          /* page background */
  --bg-2: #1a1a1a;          /* alt section / stats bar */
  --bg-3: #212121;          /* input rest, recessed wells */
  --bg-card: #1d1d1d;       /* surface for branded cards */
  --bg-card-hover: #232323;
  --bg-card-app: #2a2a2a;   /* app surface card (slightly lighter than public) */
  --bg-card-app-hover: #323232;
  --bg-light: #363636;      /* hover/active row, focused input */
  --bg-input: #161616;

  /* ── Raw: Lines / dividers ────────────────────────────────────── */
  --line-1: #2a2a2a;
  --line-2: #383838;
  --line-3: #4a4a4a;
  --line-app: #3a3a3a;      /* app default border */

  /* ── Raw: Ink (text), warm off-white through warm gray ─────────
     Unified on warm: same body text color across app + public surfaces.
     --ink-1-cool retained for migration / one-off needs only. */
  --ink-0: #f4f1ec;         /* highest contrast — display/headings */
  --ink-1: #d8d4cc;         /* primary body text (warm, both surfaces) */
  --ink-1-cool: #e8e8e8;    /* legacy cool — do not use in new code */
  --ink-2: #9a9690;         /* secondary text */
  --ink-3: #6a6660;         /* tertiary / metadata */
  --ink-4: #45433f;         /* placeholder / divider tone */

  /* ── Raw: Accent — Cube orange ────────────────────────────────── */
  --accent: #e0393f;
  --accent-hot: #f2565b;    /* hover / glow */
  --accent-deep: #a12226;   /* pressed */
  --accent-soft: rgba(224, 57, 63, 0.10);   /* tinted backgrounds */
  --accent-glow: rgba(224, 57, 63, 0.18);   /* shadow / outer glow */
  --accent-line: rgba(224, 57, 63, 0.30);   /* hairline borders */
  --accent-on:   #1a0304;   /* foreground when sitting ON accent fill */

  /* ── Raw: Status (semantic by hue, used across both surfaces) ──── */
  --status-good:   #4caf50;
  --status-good-2: #3fb950;          /* table-cell variant */
  --status-warn:   #ff9800;
  --status-warn-2: #d29922;
  --status-bad:    #f4511e;          /* shifted from #f44336: too close to the crimson accent */
  --status-bad-2:  #ff6e40;
  --status-info:   #29b6f6;
  --status-info-2: #58a6ff;          /* "main character" link blue */
  --status-bad-soft: rgba(244, 81, 30, 0.12);

  /* Brand partner colors (use only at integration touchpoints) */
  --brand-discord: #5865F2;
  --brand-discord-hover: #4752C4;

  /* ── Raw: Typography stacks ───────────────────────────────────── */
  --font-display: "Chakra Petch", "Helvetica Neue", Arial, sans-serif;
  --font-body-public: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body-app: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, "Noto Sans SC", "Microsoft YaHei",
                   sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
               Consolas, monospace;

  /* ── Raw: Type scale ──────────────────────────────────────────── */
  --fs-10: 10px;   /* eyebrow / mono caption */
  --fs-11: 11px;   /* table header, label-uppercase */
  --fs-12: 12px;   /* small button, nav label */
  --fs-13: 13px;   /* app body, table cell */
  --fs-14: 14px;   /* public body */
  --fs-15: 15px;   /* notification title */
  --fs-17: 17px;   /* lede */
  --fs-20: 20px;   /* card-section title */
  --fs-24: 24px;   /* stat value */
  --fs-28: 28px;   /* h2 display */
  --fs-32: 32px;   /* large stat */
  --fs-display-xl: clamp(56px, 11vw, 132px);   /* hero stat number */
  --fs-display-lg: clamp(56px, 10vw, 110px);   /* hero wordmark */
  --fs-display-md: clamp(40px, 6vw, 72px);     /* hero ticker headline */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.0;
  --lh-snug: 1.2;
  --lh-body: 1.5;
  --lh-relaxed: 1.6;

  --ls-tight: 0;
  --ls-button: 1.5px;          /* uppercase display buttons */
  --ls-eyebrow: 3px;           /* eyebrow mono */
  --ls-wordmark-md: 5px;       /* topnav wordmark */
  --ls-wordmark-lg: 14px;      /* hero wordmark */
  --ls-wordmark-xl: 22px;      /* big-mark hero */
  --ls-label: 0.5px;           /* small caps labels */
  --ls-mono: 1.5px;            /* mono caption */

  /* ── Raw: Spacing scale (used across both surfaces) ───────────── */
  --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;

  /* ── Raw: Radii (small — Cube avoids pillowy cards) ───────────── */
  --radius-xs: 3px;            /* app buttons, inputs, sidebar items */
  --radius-sm: 4px;            /* app cards, badges */
  --radius-md: 6px;            /* public cards, primary buttons */
  --radius-lg: 10px;           /* public auth card, hero panels */
  --radius-pill: 100px;
  --radius-circle: 50%;

  /* ── Raw: Shadows ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 8px 0 rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 8px 16px 0 rgba(0, 0, 0, 0.7);
  --shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.4);
  --shadow-glow-accent: 0 0 0 1px var(--accent-line), 0 6px 28px var(--accent-glow);
  --shadow-text-display: 0 0 60px rgba(224, 57, 63, 0.15);

  /* ── Raw: Motion ──────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast: 0.15s;       /* row hover, sidebar item */
  --dur-base: 0.2s;        /* button, card hover */
  --dur-slow: 0.3s;        /* alert slide, modal */

  /* ── Raw: Layout ──────────────────────────────────────────────── */
  --layout-navbar: 50px;            /* app fixed top */
  --layout-public-nav: 56px;        /* public sticky top */
  --layout-sidebar: 180px;
  --layout-maxw: 1240px;            /* public content max */
  --layout-app-content: 1200px;
  --layout-modal-z: 9999;
  --layout-navbar-z: 1000;

  /* ── Raw: Texture (public surface only) ───────────────────────── */
  --grid-line: rgba(224, 57, 63, 0.04);
  --scanline: rgba(255, 255, 255, 0.018);
  --vignette: rgba(0, 0, 0, 0.45);

  /* ════════════════════════════════════════════════════════════════
     SEMANTIC TOKENS — reference these from components, not raw vars
     ════════════════════════════════════════════════════════════════ */

  /* Surfaces */
  --surface-page: var(--bg-1);
  --surface-page-deep: var(--bg-0);
  --surface-section-alt: var(--bg-2);
  --surface-card: var(--bg-card-app);          /* default for app */
  --surface-card-hover: var(--bg-card-app-hover);
  --surface-card-public: var(--bg-card);       /* branded landing pages */
  --surface-card-public-hover: var(--bg-card-hover);
  --surface-row-hover: var(--bg-light);
  --surface-input: var(--bg-input);
  --surface-input-app: var(--bg-1);
  --surface-input-focus: var(--bg-light);
  --surface-table-head: var(--bg-0);
  --surface-card-footer: var(--bg-0);
  --surface-overlay-scrim: rgba(0, 0, 0, 0.85);     /* modal */
  --surface-overlay-mobile: rgba(0, 0, 0, 0.5);     /* mobile sidebar */

  /* Borders */
  --border-default: var(--line-app);
  --border-subtle: var(--line-1);
  --border-strong: var(--line-2);
  --border-accent: var(--accent-line);
  --border-focus: var(--accent);

  /* Text — unified warm primary on both surfaces */
  --text-display: var(--ink-0);
  --text-primary: var(--ink-1);
  --text-secondary: var(--ink-2);
  --text-tertiary: var(--ink-3);
  --text-disabled: var(--ink-4);
  --text-on-accent: var(--accent-on);
  --text-link: var(--accent);
  --text-link-blue: var(--status-info-2);      /* "main character" tags */

  /* Status (semantic) */
  --status-success-fg: var(--status-good);
  --status-success-fg-2: var(--status-good-2);
  --status-warning-fg: var(--status-warn);
  --status-warning-fg-2: var(--status-warn-2);
  --status-error-fg: var(--status-bad);
  --status-error-fg-2: var(--status-bad-2);
  --status-error-bg: var(--status-bad-soft);
  --status-info-fg: var(--status-info);

  /* Type roles */
  --h1: var(--fw-bold) var(--fs-32) / var(--lh-snug) var(--font-display);
  --h2: var(--fw-semibold) var(--fs-28) / var(--lh-snug) var(--font-display);
  --h3: var(--fw-semibold) var(--fs-20) / var(--lh-snug) var(--font-display);
  --page-title: var(--fw-bold) 1.5rem / var(--lh-snug) var(--font-body-app);
  --card-title: var(--fw-semibold) 1rem / 1.3 var(--font-body-app);
  --body: var(--fw-regular) var(--fs-13) / var(--lh-body) var(--font-body-app);
  --body-lg: var(--fw-regular) var(--fs-15) / var(--lh-body) var(--font-body-public);
  --body-public: var(--fw-regular) var(--fs-15) / var(--lh-body) var(--font-body-public);
  --body-sm: var(--fw-regular) var(--fs-12) / var(--lh-body) var(--font-body-app);
  --caption: var(--fw-medium) var(--fs-11) / var(--lh-body) var(--font-body-app);
  --label-upper: var(--fw-semibold) var(--fs-11) / var(--lh-body) var(--font-body-app);
  --eyebrow: var(--fw-medium) var(--fs-10) / var(--lh-body) var(--font-mono);
  --tabular: var(--fw-medium) var(--fs-12) / var(--lh-body) var(--font-mono);

  /* Reusable mixings (set as custom vars in shorthand only) */
  --uppercase-label: uppercase;
  --uppercase-letter-spacing: var(--ls-label);

  /* ── Legacy variable compatibility ──────────────────────────────
     ~30 module dashboard templates were never migrated off the old
     (pre-token-system) variable names when the legacy style.css was
     replaced — they've been resolving to nothing (unset) ever since.
     Aliasing here fixes every one of those templates in one place and
     makes them respond correctly to future palette changes too,
     without touching 30+ individual template files. Do not use these
     names in new code — use the real semantic vars above instead. */
  --accent-color: var(--accent);
  --primary-color: var(--accent);
  --primary-hover: var(--accent-hot);
  --cube-accent: var(--accent);
  --cube-accent-deep: var(--accent-deep);
  --cube-accent-soft: var(--accent-soft);
  --cube-accent-line: var(--accent-line);

  --bg-primary: var(--bg-0);
  --dark-bg: var(--bg-1);
  --darker-bg: var(--bg-0);
  --card-bg: var(--bg-card-app);
  --card-hover-bg: var(--bg-card-app-hover);
  --light-bg: var(--bg-light);
  --input-bg: var(--bg-input);
  --cube-bg-1: var(--bg-1);
  --cube-bg-2: var(--bg-2);
  --cube-card: var(--bg-card-app);
  --cube-surface: var(--bg-card-app);
  --cube-elevated: var(--bg-card-app-hover);

  --border-color: var(--line-app);
  --cube-border: var(--line-app);
  --cube-line: var(--line-1);
  --cube-line-2: var(--line-2);
  --focus-ring: var(--accent-line);

  --text-color: var(--text-primary);
  --text-body: var(--text-primary);
  --text-heading: var(--text-display);
  --text-muted: var(--text-tertiary);
  --text-faint: var(--text-disabled);
  --text-danger: var(--status-error-fg);
  --text-success: var(--status-success-fg);

  --danger: var(--status-bad);
  --danger-color: var(--status-bad);
  --error: var(--status-bad);
  --success: var(--status-good);
  --success-color: var(--status-good);
  --warning: var(--status-warn);
  --warning-color: var(--status-warn);
  --cube-danger: var(--status-bad);
  --cube-success: var(--status-good);
  --cube-warning: var(--status-warn);
  --cube-info: var(--status-info);
  --cube-info-soft: rgba(41, 182, 246, 0.12);
  --cube-warning-soft: rgba(255, 152, 0, 0.12);

  --font-body: var(--font-body-app);
  --font-system: var(--font-body-app);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --grad-card-header: linear-gradient(135deg, var(--bg-0) 0%, var(--bg-card-app) 100%);
  --grad-progress: linear-gradient(90deg, var(--accent), var(--accent-hot));
}

/* ── Surface scope helpers ───────────────────────────────────────────
   Add `data-surface="public"` to a tree to switch defaults to the
   marketing/HUD aesthetic. Add `data-surface="app"` (the default) for
   the dashboard aesthetic. Components reference semantic vars and
   automatically pick up the right defaults.
   ──────────────────────────────────────────────────────────────────── */

[data-surface="public"] {
  --surface-card: var(--surface-card-public);
  --surface-card-hover: var(--surface-card-public-hover);
  --border-default: var(--line-2);
}

[data-surface="app"] {
  /* Defaults already match — kept explicit for switch-back parity. */
  --surface-card: var(--bg-card-app);
  --surface-card-hover: var(--bg-card-app-hover);
  --border-default: var(--line-app);
}

/* ── Selection — accent on warm-black ───────────────────────────── */
::selection {
  background: var(--accent);
  color: var(--accent-on);
}

/* ── Scrollbars (thin, neutral) ─────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }