/* 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); }

/* ═══ Page surface / text helpers (B3 — JobDetails convergence, CW-PLI-038 PR2) ═══
   Color-only, role-mapped onto the semantic vars. Layout (border-width/radius/padding/
   text-size) stays in the markup as Tailwind utilities; only brand COLOR lives here. */
.crew-surface        { background: var(--surface);        border-color: var(--border); }
.crew-surface-raised { background: var(--surface-raised); border-color: var(--border); }
.crew-border         { border-color: var(--border); }
.crew-text-muted     { color: var(--text-muted); }
.crew-text-secondary { color: var(--text-secondary); }

/* Inline alert panels — REUSE the existing red/gray tints (no new hex).
   --error reuses the .crew-badge--red red base (239,68,68) + #B91C1C text;
   --muted reuses the raised-surface / border / secondary-text roles. */
.crew-alert--error { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.30); color: #B91C1C; }
.crew-alert--muted { background: var(--surface-raised); border-color: var(--border);       color: var(--text-secondary); }

/* Success / warning alert variants (CW-PLI-038 PR4 — JobApply multi-state panel).
   Tints reused from .crew-badge--green / .crew-badge--yellow (no new hex); +0.30 border like --error. */
.crew-alert--success { background: rgba(0,229,160,0.15);  border-color: rgba(0,229,160,0.30);  color: #047857; }
.crew-alert--warning { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.30); color: #B45309; }

/* ═══ BrowseJobs convergence primitives (B3 — CW-PLI-038 PR3, color-only) ═══
   Form controls, the solid active-filter count chip, skeleton fill, and a strong-text
   helper. Layout (radius/padding/size/width) stays in the markup as Tailwind utilities. */
.crew-input {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-strong);
}
.crew-input::placeholder { color: var(--text-muted); }
.crew-input:focus {
    outline: none;
    border-color: var(--ink-800);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink-800) 18%, transparent);
}
.crew-count        { background: var(--ink-800); color: #fff; }
.crew-skeleton     { background: var(--slate-200); }
.crew-text-strong  { color: var(--text-strong); }