/* ============================================================================
   MASTERSHIP INFORMATION SYSTEMS — Foundations (color + type)
   Source of truth: MastershipWeb/wwwroot/css/tokens.css (shipped website)
   Cross-referenced with: Mastership_Brand_Guide_Designer.docx v1.0 (2025)
   ----------------------------------------------------------------------------
   "Every client is a node. We are the network."
   One tonal family — abyss black → deep navy → storm blue → icy mist.
   Default theme is DARK. Light mode lives under [data-theme="light"].
   ============================================================================ */

/* Inter (400/500 only) + JetBrains Mono (mono) + IBM Plex Arabic (RTL).
   These are the real brand fonts, pulled from Google Fonts where the website
   sources them. Swap the @import for self-hosted /fonts if you go offline. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=IBM+Plex+Sans+Arabic:wght@400;500&display=swap');

:root {
    /* ── COLOR PALETTE — 12 stops, one family ──────────────────────────────
     Values below match the SHIPPED website (tokens.css). The brand guide
     lists slightly deeper anchors (abyss #060A10, deep #080C14) for print —
     noted inline. Prefer these when matching the live product. */
    --c-abyss: #0A1220; /* page bg            (guide print value: #060A10) */
    --c-deep: #0D1828; /* card bg            (guide print value: #080C14) */
    --c-navy: #0D1520; /* surface layer 1 / input bg */
    --c-navy-mid: #162535; /* surface layer 2 / raised, badges */
    --c-navy-up: #1A2D45; /* borders, dividers */
    --c-storm-1: #2B4A6A; /* muted text, subtle borders */
    --c-storm-2: #3D6080; /* secondary text */
    --c-storm-3: #4A7299; /* body text on dark */
    --c-core: #5B7FA6; /* PRIMARY BRAND — logo, CTAs, links, active */
    --c-ice: #8BAFD4; /* headlines on dark */
    --c-mist: #C8D8E8; /* display text on dark — the brightest */
    --c-fog: #E8F2FA; /* light backgrounds / lightest accent */
    /* ── SEMANTIC COLOR ROLES ──────────────────────────────────────────────
     "One bright thing at a time." Text steps down mist → ice → body → muted
     → subtle. Never two #C8D8E8 elements competing in one view. */
    --bg-page: var(--c-abyss);
    --bg-card: var(--c-deep);
    --bg-surface: var(--c-navy);
    --bg-raised: var(--c-navy-mid);
    --border-color: #162535;
    --border-mid: var(--c-storm-1);
    --text-primary: var(--c-mist); /* headlines ONLY — brightest */
    --text-secondary: var(--c-ice); /* h2, card titles, product names */
    --text-body: #8FB3D6; /* paragraph text            — ~7:1 on abyss  */
    --text-muted: #7196BD; /* secondary descriptions    — ~5:1 on abyss  */
    --text-subtle: #5C7EA3; /* labels, captions          — ~3.5:1 (large/UI only) */
    /* Accessibility note: the original brand ramp dipped to #4A7299 / #2B4A6A for these
     roles, which fail WCAG on the dark surfaces. The values above are raised into a
     readable range while staying in the blue-grey family. The original "ghost" tones
     live below if you need a truly decorative, non-essential whisper of text. */
    --text-ghost: #3D6080; /* decorative only — never essential copy */

    --accent: var(--c-core); /* links, node labels, active states */
    --accent-hi: var(--c-ice); /* hovered links, highlights */
    /* ── FUNCTIONAL COLORS — use ONLY in their one context ─────────────────── */
    --whatsapp: #25D366; /* WhatsApp button background ONLY */
    --error: #E5142A; /* form validation error ONLY */
    --success: #2D9E52; /* form field success border ONLY (NOT brand green) */
    /* ── TYPOGRAPHY ───────────────────────────────────────────────────────── */
    --font: "Inter", "Arial", "Helvetica Neue", sans-serif;
    --font-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
    --font-mono: "JetBrains Mono", "Courier New", monospace;
    /* Weights — only 400 and 500 in brand materials. Never 300 (renders poorly).
     600/700 are reserved for the all-caps wordmark lockup only. */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-wordmark: 700;
    /* Type scale (rem) */
    --text-xs: 0.625rem; /* 10px — labels */
    --text-sm: 0.75rem; /* 12px — captions */
    --text-base: 0.875rem; /* 14px — UI / body small */
    --text-md: 1rem; /* 16px — body */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 1.25rem; /* 20px — subhead */
    --text-2xl: 1.5rem; /* 24px — h2 */
    --text-3xl: 2rem; /* 32px */
    --text-4xl: 2.5rem; /* 40px — h1 */
    --text-5xl: 3.5rem; /* 56px */
    --text-6xl: 5rem; /* 80px — display */
    /* ── SPACING (8pt-ish) ────────────────────────────────────────────────── */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;
    /* ── LAYOUT ───────────────────────────────────────────────────────────── */
    --container: 1200px;
    --container-sm: 860px;
    --container-xs: 640px;
    /* Corner radii — small, restrained. Pills only for tags/toggles. */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;
    /* ── MOTION ───────────────────────────────────────────────────────────── */
    --ease: cubic-bezier(0.16, 1, 0.3, 1); /* signature ease-out */
    --ease-fast: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 150ms;
    --dur-base: 250ms;
    --dur-slow: 450ms;
    /* ── ELEVATION — hairline borders do most of the work, shadows are subtle ── */
    --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 0.5px #0F1828;
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 0.5px #0F1828;
    /* ── SEMANTIC TYPE STYLES (composed) ──────────────────────────────────── */
    --display-size: clamp(3rem, 7vw, 6rem);
    --h1-size: clamp(1.75rem, 3vw, 2.5rem);
    --h2-size: var(--text-2xl);
}

/* ─── LIGHT MODE OVERRIDES ──────────────────────────────────────────────── */
[data-theme="light"] {
    --bg-page: #F0F4F8;
    --bg-card: #E8EFF6;
    --bg-surface: #DEEAF4;
    --bg-raised: #D0DDE8;
    --border-color: #B8CCE0;
    --border-mid: #8BAFD4;
    --text-primary: #0D1520;
    --text-secondary: #1A2D45;
    --text-body: #2B4A6A;
    --text-muted: #3D6080;
    --text-subtle: #5B7FA6;
    --accent: #1A2D45;
    --accent-hi: #0D1520;
    --c-mist: #0D1520;
    --c-ice: #1A2D45;
    --c-storm-1: #3D6080;
    --c-storm-2: #2B4A6A;
    --c-storm-3: #1A2D45;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 0.5px #B8CCE0;
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 0.5px #B8CCE0;
}

/* ============================================================================
   SEMANTIC TYPE CLASSES — drop-in. Match the shipped base.css.
   ============================================================================ */
.ms-display {
    font-family: var(--font);
    font-size: var(--display-size);
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    line-height: 1.05;
    letter-spacing: -1px;
}

.ms-h1 {
    font-family: var(--font);
    font-size: var(--h1-size);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.ms-h2 {
    font-family: var(--font);
    font-size: var(--h2-size);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
    line-height: 1.3;
}

.ms-subhead {
    font-family: var(--font);
    font-size: var(--text-xl);
    font-weight: var(--fw-medium);
    color: var(--c-ice);
}

.ms-body {
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: var(--fw-regular);
    color: var(--text-body);
    line-height: 1.8;
}

.ms-body-sm {
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--fw-regular);
    color: var(--text-body);
    line-height: 1.7;
}

.ms-label { /* uppercase eyebrow */
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ms-caption {
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-subtle);
}

.ms-wordmark { /* the MASTERSHIP lockup text */
    font-family: var(--font);
    font-weight: var(--fw-wordmark);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-primary);
}

.ms-mono {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    color: var(--text-body);
}