/* Crewly canonical design tokens — single source of truth (B2b).
   Spec: Docs/decisions/2026-06-17-design-token-spec.md
   Loaded globally in index.html BEFORE page-level styles (after MudBlazor, before tailwind/app).
   FOUNDATION ONLY — pages still hardcoding hex are unaffected; var(--*) consumers converge here.
   B3 migrates pages onto the semantic + .crew-dark layer. */

:root {
    /* ── brand spine ── */
    --ink-900: #070E1A;
    --ink-800: #0D1B2A;
    --ink-700: #0F172A;
    --ink-650: #142030;
    --steel-500: #415A77;
    --cyan-400: #00CFFF;   /* canonical brand cyan (retires #06B6D4) */
    --cyan-600: #00A5CC;   /* cyan hover/pressed */
    --green-400: #00E5A0;

    /* ── slate ramp ── */
    --slate-50: #F8FAFC;
    --slate-100: #F1F5F9;
    --slate-200: #E2E8F0;
    --slate-400: #94A3B8;
    --slate-500: #64748B;
    --slate-600: #475569;
    --slate-700: #334155;

    /* ── semantic roles — light context (default) ── */
    --bg: var(--slate-50);
    --surface: #FFFFFF;
    --surface-raised: var(--slate-100);
    --border: var(--slate-200);
    --text-strong: var(--ink-800);
    --text-secondary: var(--slate-700);
    --text-muted: var(--slate-500);
    --text-faint: var(--slate-400);
    --accent: var(--cyan-400);
    --accent-hover: var(--cyan-600);
    --accent-contrast: var(--ink-900); /* readable text/icon color ON a cyan fill */
    --success: var(--green-400);

    /* ── typography ── */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ── radius / shadow / layout ── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 9999px;
    --shadow-sm: 0 1px 8px rgba(15,23,42,0.06);
    --shadow-md: 0 4px 20px rgba(15,23,42,0.10);
    --shadow-dark-sm: 0 1px 8px rgba(0,0,0,0.30);
    --shadow-dark-md: 0 8px 30px rgba(0,0,0,0.40);
    --sidebar-width: 260px;
    --topbar-height: 64px;

    /* ── Legacy --color-* shims — keep MainLayout/Sidebar/Dashboard working and
          retire drifted values BY ROLE. (MainLayout.razor is PROTECTED and keeps its
          own local :root for these names when it is the active layout.) ── */
    --color-navy: var(--ink-700);
    --color-cyan: var(--cyan-400);        /* was UNDEFINED (Sidebar.razor consumes it) → fixed */
    --color-blue-vivid: var(--ink-800);   /* retire #2563EB → navy: every consumer is a fill/text on a LIGHT surface; cyan-on-light fails contrast */
    --color-bg: var(--bg);
    --color-surface: var(--surface);
    --color-border: var(--border);
    --color-text: var(--text-strong);
    --color-muted: var(--text-muted);     /* was UNDEFINED (Dashboard.razor consumes it) → fixed */
}

/* Dark context opt-in. No page sets this yet — B3 migrates the dark public/shell pages onto it. */
.crew-dark {
    --bg: var(--ink-900);
    --surface: var(--ink-800);
    --surface-raised: rgba(255,255,255,0.05);
    --border: rgba(255,255,255,0.08);
    --text-strong: #FFFFFF;
    --text-secondary: rgba(255,255,255,0.70);
    --text-muted: var(--slate-500);
    --text-faint: var(--slate-400);
    --shadow-sm: var(--shadow-dark-sm);
    --shadow-md: var(--shadow-dark-md);
}

/* Cyan accent helper (accent is NOT the default text/button color; use intentionally, ideally on dark). */
.crew-accent { color: var(--accent); }

/* ── Global body font (B3-PR1, Decision 4) — applies Inter under ALL layouts.
      MainLayout is protected; this global rule covers SeafarerLayout/EmptyLayout pages too. ── */
body { font-family: var(--font-body); }

/* ═══ Shared component brand classes (B3-PR1) ═══
   Token-driven styling for Shared/Button.razor, Shared/Badge.razor, Shared/EmptyState.razor.
   CSS isolation is NOT wired in this project (no *.styles.css link in the protected index.html),
   so brand classes live here in the already-global tokens.css (single source). The components keep
   their Tailwind LAYOUT utilities (flex/padding/radius/text-size); only brand COLOR moves here. */

/* Button — primary = navy (default CTA); cyan is accent-only (.crew-btn--accent). */
.crew-btn {
    font-family: var(--font-body);
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    cursor: pointer;
}
.crew-btn:disabled { opacity: .5; cursor: not-allowed; }
.crew-btn--primary { background: var(--ink-800); color: #fff; }
.crew-btn--primary:hover:not(:disabled) { background: var(--ink-700); }
.crew-btn--secondary { background: var(--surface); color: var(--text-strong); border-color: var(--border); }
.crew-btn--secondary:hover:not(:disabled) { background: var(--surface-raised); }
.crew-btn--ghost { background: transparent; color: var(--text-strong); }
.crew-btn--ghost:hover:not(:disabled) { background: var(--surface-raised); }
.crew-btn--danger { background: #DC2626; color: #fff; }
.crew-btn--danger:hover:not(:disabled) { background: #B91C1C; }
.crew-btn--accent { background: var(--accent); color: var(--accent-contrast); }
.crew-btn--accent:hover:not(:disabled) { background: var(--accent-hover); }

/* Badge — soft status tints aligned to the Mud pages (Dashboard/MyApplications). */
.crew-badge { font-family: var(--font-body); }
.crew-badge--gray   { background: var(--surface-raised);     color: var(--text-secondary); }
.crew-badge--green  { background: rgba(0,229,160,0.15);      color: #047857; }
.crew-badge--blue   { background: rgba(0,207,255,0.14);      color: #0E7490; }
.crew-badge--yellow { background: rgba(245,158,11,0.15);     color: #B45309; }
.crew-badge--red    { background: rgba(239,68,68,0.12);      color: #B91C1C; }

/* EmptyState — token surface/border + muted text, matching the Mud empty states. */
.crew-empty { background: var(--surface); border: 1px solid var(--border); }
.crew-empty__title { color: var(--text-strong); }
.crew-empty__desc  { color: var(--text-muted); }