/* ============================================================
   Klyxin brand system — machine source of truth (tokens.css)
   Style THROUGH these tokens; never hardcode a hex in a component.
   Light is default. Dark via prefers-color-scheme AND [data-theme].
   RTL flips the Beam angle. All pairings measured WCAG 2.1 AA.
   ============================================================ */

/* @import removed: Plex superfamily is self-hosted via css/fonts.css (zero external network, KLX-038 §5). */

:root {
  /* ---- Colour: light theme (default) ---- */
  --bg: #F4F6FB;
  --surface: #FFFFFF;
  --surface-2: #E9EDF7;
  --border: #D5DCEA;
  --border-strong: #BEC7DB;
  --text: #0E1220;
  --text-muted: #4C5670;
  --text-subtle: #5E6884;
  --brand: #2B44E0;
  --brand-strong: #2036C4;
  --brand-050: #F0F2FF;
  --brand-100: #E6EAFF;
  --brand-200: #C9D4FF;
  --on-brand: #FFFFFF;
  --spark: #FF7A45;
  --spark-text: #B23A0E;
  --spark-ring: var(--bg);
  --success: #0E9F6E;
  --success-text: #07734F;
  --warning: #B4690E;
  --danger: #D42B2B;
  --on-status: #FFFFFF;
  --focus: #2B44E0;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus) 45%, transparent);

  /* ---- The Beam (only brand gradient) — blues only, white AA at every stop ---- */
  --grad-beam-ltr: linear-gradient(135deg, #2036C4 0%, #2B44E0 55%, #3D5BF0 100%);
  --grad-beam-rtl: linear-gradient(225deg, #2036C4 0%, #2B44E0 55%, #3D5BF0 100%);
  --grad-beam: var(--grad-beam-ltr);
  --grad-beam-soft-ltr: linear-gradient(135deg, var(--brand-100) 0%, var(--bg) 72%);
  --grad-beam-soft-rtl: linear-gradient(225deg, var(--brand-100) 0%, var(--bg) 72%);
  --grad-beam-soft: var(--grad-beam-soft-ltr);

  /* ---- Duotone imagery inks ---- */
  --duotone-shadow: #141B38;
  --duotone-highlight: #C9D4FF;

  /* ---- The Klyxin Field ---- */
  --field-cell: 40px;
  --field-gap: 14px;
  --field-radius: 11px;
  --field-latent: #C9D4FF;

  /* ---- Typography ---- */
  --font-sans: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: "IBM Plex Serif", "IBM Plex Sans Arabic", Georgia, serif;
  --fs-caption: 0.8125rem;   /* 13 */
  --fs-small: 0.875rem;      /* 14 */
  --fs-body: 1rem;           /* 16 floor */
  --fs-body-lg: 1.125rem;    /* 18 */
  --fs-h4: 1.25rem;          /* 20 */
  --fs-h3: clamp(1.375rem, 1.15rem + 1vw, 1.625rem);   /* 22-26 */
  --fs-h2: clamp(1.75rem, 1.35rem + 1.9vw, 2.25rem);   /* 28-36 */
  --fs-h1: clamp(2.25rem, 1.5rem + 3.4vw, 3.5rem);     /* 36-56 */
  --fs-display: clamp(2.75rem, 1.4rem + 5.6vw, 4.5rem);/* 44-72 */
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.15;
  --lh-heading: 1.3;
  --lh-body: 1.7;
  --track-label: 0.06em;

  /* ---- Spacing (4px scale) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --container: 1160px;

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-input: 12px;
  --radius-card: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Elevation (cool ink shadows, never pure black on light) ---- */
  --shadow-sm: 0 1px 2px rgba(14,18,32,0.06), 0 1px 3px rgba(14,18,32,0.05);
  --shadow-md: 0 6px 16px rgba(14,18,32,0.08), 0 2px 6px rgba(14,18,32,0.06);
  --shadow-lg: 0 24px 60px rgba(14,18,32,0.16), 0 8px 20px rgba(14,18,32,0.08);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 400ms;

  color-scheme: light;
}

/* ---- Dark via OS preference (before/without a manual choice) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0D17;
    --surface: #141826;
    --surface-2: #1D2234;
    --border: #2C3348;
    --border-strong: #3B4360;
    --text: #EEF1F9;
    --text-muted: #A4ADC6;
    --text-subtle: #8B94AE;
    --brand: #7C97FF;
    --brand-strong: #3D5BF0;
    --brand-050: #141B38;
    --brand-100: #1B2246;
    --brand-200: #26305C;
    --spark: #FF9366;
    --spark-text: #FF9366;
    --success: #34D399;
    --success-text: #34D399;
    --warning: #FBBF24;
    --danger: #F87171;
    --on-status: #0A0D17;
    --focus: #7C97FF;
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus) 50%, transparent);
    --duotone-shadow: #0A0D17;
    --duotone-highlight: #7C97FF;
    --field-latent: #313A5A;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 8px 20px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.4);
    --shadow-lg: 0 28px 64px rgba(0,0,0,0.6), 0 10px 24px rgba(0,0,0,0.5);
    color-scheme: dark;
  }
}

/* ---- Dark via manual toggle (wins in both directions) ---- */
[data-theme="dark"] {
  --bg: #0A0D17;
  --surface: #141826;
  --surface-2: #1D2234;
  --border: #2C3348;
  --border-strong: #3B4360;
  --text: #EEF1F9;
  --text-muted: #A4ADC6;
  --text-subtle: #8B94AE;
  --brand: #7C97FF;
  --brand-strong: #3D5BF0;
  --brand-050: #141B38;
  --brand-100: #1B2246;
  --brand-200: #26305C;
  --spark: #FF9366;
  --spark-text: #FF9366;
  --success: #34D399;
  --success-text: #34D399;
  --warning: #FBBF24;
  --danger: #F87171;
  --on-status: #0A0D17;
  --focus: #7C97FF;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus) 50%, transparent);
  --duotone-shadow: #0A0D17;
  --duotone-highlight: #7C97FF;
  --field-latent: #313A5A;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 20px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.4);
  --shadow-lg: 0 28px 64px rgba(0,0,0,0.6), 0 10px 24px rgba(0,0,0,0.5);
  color-scheme: dark;
}

/* ---- RTL flips the Beam so the light source stays top-start ---- */
[dir="rtl"] {
  --grad-beam: var(--grad-beam-rtl);
  --grad-beam-soft: var(--grad-beam-soft-rtl);
}

/* ---- Base reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Forward glyphs (chevrons/arrows) flip with reading direction */
.klx-fwd { display: inline-flex; }
[dir="rtl"] .klx-fwd { transform: scaleX(-1); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p { text-wrap: pretty; margin: 0; }
h1, h2, h3, h4 { line-height: var(--lh-heading); }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand-strong); text-decoration-color: color-mix(in srgb, var(--brand-strong) 40%, transparent); text-underline-offset: 0.18em; }
a:hover { color: var(--brand); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 65%, transparent); outline-offset: 2px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--brand) 24%, transparent); }

/* ---- Numerics ---- */
.tnum { font-feature-settings: "tnum" 1; }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

/* ---- Script-aware eyebrow/kicker: Latin gets caps + tracking, Arabic neither ---- */
.klx-eyebrow {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--brand-strong);
  line-height: var(--lh-heading);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}
[dir="rtl"] .klx-eyebrow { text-transform: none; letter-spacing: normal; }

/* ---- Accessibility helpers ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.klx-skip {
  position: absolute; inset-block-start: -60px; inset-inline-start: var(--space-4);
  z-index: 200; background: var(--surface); color: var(--brand-strong);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-input);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-md);
  font-weight: var(--fw-semibold); text-decoration: none;
  transition: inset-block-start var(--dur) var(--ease-out);
}
.klx-skip:focus-visible { inset-block-start: var(--space-4); }

/* ---- Scroll reveal (transform + opacity only; safe fallback) ---- */
.klx-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); will-change: opacity, transform; }
.klx-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .klx-reveal { opacity: 1 !important; transform: none !important; } }

/* ---- Transform-only reveal (always visible; capture + print safe) ---- */
.klx-up { transform: translateY(28px); transition: transform 700ms var(--ease-out); }
.klx-up.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) { .klx-up { transform: none !important; } }

/* ---- Motion primitives (transform/opacity only) ---- */
@keyframes klx-pulse { 0%,100% { opacity: 0.9; } 50% { opacity: 0.35; } }
@keyframes klx-spin { to { transform: rotate(360deg); } }
@keyframes klx-rise { from { transform: translateY(14px); } to { transform: none; } }
@keyframes klx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes klx-sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes klx-cell-live { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }

/* ---- Reduced motion: clean static fallback ---- */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Print: force clean light ink-on-white document ---- */
@media print {
  :root, [data-theme="dark"], [data-theme="light"] {
    --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F1F3F9;
    --text: #0E1220; --text-muted: #333A4C; --text-subtle: #4C5670;
    --brand: #2036C4; --brand-strong: #2036C4;
    --warning: #8A4F09; color-scheme: light;
  }
  [data-print-hide] { display: none !important; }
  body { background: #FFFFFF; }
  a { text-decoration: underline; }
}