/* design-system.css - Phase 2 shared design system (DESIGN_SPEC.md)
   Loaded after fonts.css, before style.css (see DESIGN_SPEC.md section 8).
   Contains: the structural token system (section 1), the .shakhbata-skin/.seenjeem-skin
   scoping classes (section 2), every .ds-* shared component (section 3), the shared motion
   keyframes + reduced-motion base rule (section 4), and the shared :focus-visible base rule
   (section 5).

   شخبطة's own literal :root variables (--ink, --teal, --gold, etc.) live in style.css and are
   NOT touched here - .shakhbata-skin below only aliases the new shared role-token names onto
   those existing values, per DESIGN_SPEC.md section 2. */

:root {
  /* ---- 1.1 Spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;

  /* ---- 1.2 Radius scale ---- */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- 1.3 Elevation - two-tier shadow system ---- */
  --shadow-surface: 0 2px 0 rgba(0,0,0,.5), 0 22px 44px -22px rgba(0,0,0,.85);
  --shadow-surface-inset-top: inset 0 1px 0 rgba(255,255,255,.07);
  --shelf-offset: 5px;
  --shelf-offset-active: 1px;
  --shelf-travel: 4px;

  /* ---- 1.4 Motion tokens ---- */
  --motion-instant: 80ms;
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-cut: 550ms;
  --motion-settle: cubic-bezier(.2, .85, .3, 1);
  --motion-pop: cubic-bezier(.2, 1.3, .4, 1);

  /* ---- 1.5 Z-index scale ---- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky-nav: 40;
  --z-inline-overlay: 45;
  --z-toast: 80;
  --z-crt-texture: 100;
  --z-transition: 150;
  --z-modal: 200;
  --z-connection: 9000;

  /* ---- 1.6 Color formula - platform-shell instance (default, unscoped) ---- */
  --surface-0: #11151C;
  --surface-1: #1A2028;
  --surface-2: #242B36;
  --line: #2C333F;
  --text-primary: #EDEEF3;
  --text-muted: #9BA2B0;

  --accent-signature: #4FA3B8;
  --accent-signature-d: #33717F;
  --accent-cta: #F2784F;
  --accent-cta-d: #B9552F;
  --accent-highlight: #F5B942;
  --accent-highlight-d: #B9861F;

  --semantic-success: #3FCB7C;
  --semantic-error: #FF5566;

  --focus-ring: var(--accent-highlight);

  /* platform-shell font bindings - see DESIGN_SPEC.md section 1.7: Changa for both roles until
     a dedicated shell display face is chosen (a placeholder judgment call, not a hard requirement) */
  --font-display: 'Changa', system-ui, sans-serif;
  --font-ui: 'Changa', system-ui, sans-serif;

  /* ---- 1.7 Type scale ---- */
  --type-display-1: 400 clamp(2.6rem, 8vw, 5.5rem);
  --type-display-2: 400 clamp(2rem, 6vw, 3.6rem);
  --type-display-3: 400 clamp(1.5rem, 3.5vw, 2.2rem);

  --type-ui-xs: 700 0.8rem/1.4;
  --type-ui-sm: 700 0.88rem/1.4;
  --type-ui-base: 500 1rem/1.6;
  --type-ui-md: 700 1.15rem/1.5;
  --type-ui-lg: 800 1.3rem/1.3;
  --type-ui-xl: 800 1.5rem/1.2;

  --type-numeral: 400 clamp(3rem, 10vw, 6.5rem);
  --numeral-features: "tnum" 1, "lnum" 1;

  --touch-target-min: 44px;
}

/* =====================================================================
   Section 2 - scoping architecture
   ===================================================================== */

/* شخبطة's scope: aliases the shared role-token names onto شخبطة's EXISTING literal :root
   variables in style.css (--ink, --teal, --gold, etc.). Those variables are not renamed or
   touched - this only maps new shared component tokens onto them. */
.shakhbata-skin {
  --surface-0: var(--ink);
  --surface-1: var(--ink-2);
  --surface-2: var(--ink-3);
  --line: var(--shk-line);
  --text-primary: var(--bone);
  --text-muted: var(--bone-dim);
  --accent-signature: var(--teal);
  --accent-signature-d: var(--teal-d);
  --accent-cta: var(--orange);
  --accent-cta-d: var(--orange-d);
  --accent-highlight: var(--gold);
  --accent-highlight-d: var(--gold-d);
  --semantic-success: var(--green);
  --semantic-error: var(--magenta);
  --focus-ring: var(--gold);
  --font-display: var(--display);
  --font-ui: var(--ui);
}

/* سين جيم's own instance - see DESIGN_SPEC.md section 7 for the full rationale/palette.
   Phase 2 only defines the tokens; the actual sj-* component re-skin is Phase 4. */
.seenjeem-skin {
  --surface-0: #0B0F1A;
  --surface-1: #141B2E;
  --surface-2: #1B2440;
  --line: #262F4A;
  --text-primary: #F5F3FA;
  --text-muted: #9BA3BF;

  --accent-signature: #5B6BFF;
  --accent-signature-d: #3C46B8;
  --accent-cta: #FF3D6E;
  --accent-cta-d: #C22850;
  --accent-highlight: #FFB020;
  --accent-highlight-d: #C4820F;

  --semantic-success: #3DDC84;
  --semantic-error: #FF4757;

  --focus-ring: #FFB020;
  /* --font-display / --font-ui: Phase 4's own choice, see DESIGN_SPEC.md section 7 */
}

/* =====================================================================
   Section 3 - component specs (.ds-* shared components)
   ===================================================================== */

/* ---- 3.1 Buttons ---- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-4) var(--sp-5);
  font: var(--type-ui-lg) var(--font-ui);
  border: none; border-radius: var(--radius-sm);
  cursor: pointer; min-height: var(--touch-target-min);
  transition: transform var(--motion-instant), box-shadow var(--motion-instant), filter var(--motion-fast);
}
.ds-btn--primary {
  background: var(--accent-cta); color: #1a0a02;
  box-shadow: 0 var(--shelf-offset) 0 var(--accent-cta-d), 0 12px 18px -11px rgba(0,0,0,.35);
}
.ds-btn--highlight {
  background: var(--accent-highlight); color: #2a1c02;
  box-shadow: 0 var(--shelf-offset) 0 var(--accent-highlight-d), 0 12px 18px -11px rgba(0,0,0,.35);
}
.ds-btn--secondary {
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--accent-signature);
  box-shadow: 0 var(--shelf-offset) 0 var(--surface-0), 0 14px 22px -14px rgba(0,0,0,.7);
}
.ds-btn--ghost {
  background: transparent; color: var(--text-muted); box-shadow: none;
}
.ds-btn--ghost:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 4px; }
.ds-btn--destructive {
  background: var(--semantic-error); color: #fff;
  box-shadow: 0 var(--shelf-offset) 0 rgba(0,0,0,.35), 0 12px 18px -11px rgba(0,0,0,.35);
}
.ds-btn:hover { filter: brightness(1.06); }
.ds-btn--primary:active, .ds-btn--highlight:active, .ds-btn--secondary:active, .ds-btn--destructive:active {
  transform: translateY(var(--shelf-travel));
  box-shadow: 0 var(--shelf-offset-active) 0 var(--accent-cta-d);
}
.ds-btn--highlight:active { box-shadow: 0 var(--shelf-offset-active) 0 var(--accent-highlight-d); }
.ds-btn--secondary:active { box-shadow: 0 var(--shelf-offset-active) 0 var(--surface-0); }
.ds-btn:disabled {
  background: var(--surface-2); color: var(--text-muted);
  box-shadow: 0 var(--shelf-offset) 0 var(--surface-0); opacity: .8; cursor: default;
  transform: none; filter: none;
}

/* ---- 3.2 Cards ---- */
.ds-card {
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: var(--sp-5);
  box-shadow: var(--shadow-surface); position: relative;
}
.ds-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--accent-signature), var(--accent-highlight));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.ds-card--highlight {
  border-color: var(--accent-highlight);
  box-shadow: var(--shadow-surface), 0 0 24px -8px var(--accent-highlight);
}

/* ---- 3.3 Dialogs / modals ---- */
.ds-dialog {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--motion-base);
}
.ds-dialog.open { opacity: 1; pointer-events: auto; }
.ds-dialog-sheet {
  background: var(--surface-1); width: 100%; max-width: 600px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 1px solid var(--line); border-bottom: none;
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  transform: translateY(24px);
  transition: transform var(--motion-base);
  max-height: 92vh; overflow-y: auto;
}
.ds-dialog.open .ds-dialog-sheet { transform: none; }
/* optional nice-to-have (DESIGN_SPEC.md section 3.3): centered dialog on wide viewports */
@media (min-width: 700px) {
  .ds-dialog--center { align-items: center; }
  .ds-dialog--center .ds-dialog-sheet { border-radius: var(--radius-lg); border-bottom: 1px solid var(--line); }
}

/* ---- 3.4 Form inputs ---- */
.ds-input, .ds-textarea {
  background: var(--surface-2); color: var(--text-primary);
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-4); font: var(--type-ui-lg) var(--font-ui);
  box-shadow: 0 2px 8px rgba(0,0,0,.4) inset;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.ds-input:focus, .ds-textarea:focus {
  border-color: var(--focus-ring); outline: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.4) inset, 0 0 0 3px color-mix(in srgb, var(--focus-ring) 22%, transparent);
}
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--text-muted); }
.ds-input--error { border-color: var(--semantic-error); }
.ds-field-error {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--semantic-error); font: var(--type-ui-sm) var(--font-ui);
  margin-top: var(--sp-2);
}

.ds-toggle { position: relative; display: inline-block; width: 58px; height: 32px; }
.ds-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ds-toggle-slider {
  position: absolute; inset: 0; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  transition: background var(--motion-fast);
}
.ds-toggle-slider::before {
  content: ""; position: absolute; inset-inline-start: 3px; top: 3px;
  width: 24px; height: 24px; border-radius: var(--radius-circle);
  background: var(--text-primary); transition: transform var(--motion-fast);
}
.ds-toggle input:checked + .ds-toggle-slider { background: var(--accent-signature); }
.ds-toggle input:checked + .ds-toggle-slider::before { transform: translateX(26px); }
[dir="rtl"] .ds-toggle input:checked + .ds-toggle-slider::before { transform: translateX(-26px); }

/* ---- 3.5 Badges ---- */
.ds-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  background: color-mix(in srgb, var(--accent-signature) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-signature) 48%, transparent);
  color: var(--accent-signature);
  border-radius: var(--radius-pill); padding: 3px var(--sp-3);
  font: var(--type-ui-sm) var(--font-ui);
}
.ds-badge--solid {
  background: var(--accent-signature); color: #fff;
  border-radius: var(--radius-pill); padding: 3px var(--sp-3);
  font: var(--type-ui-sm) var(--font-ui);
}

/* ---- 3.6 Navigation ---- */
.ds-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-2) var(--sp-1);
  z-index: var(--z-sticky-nav);
}
.ds-nav-back { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-2); }
.ds-nav-utility { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); }

/* ---- 3.7 Loading state ---- */
.ds-skeleton-block {
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--surface-2) 25%,
    color-mix(in srgb, var(--text-primary) 10%, transparent) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: ds-shimmer 1.4s ease-in-out infinite;
}
@keyframes ds-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---- 3.8 / 3.9 Empty and error states ---- */
.ds-empty-state {
  max-width: 420px; margin: var(--sp-6) auto 0; text-align: center;
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: var(--sp-6) var(--sp-5);
  box-shadow: var(--shadow-surface);
}
.ds-empty-state .icon { font-size: 2.2rem; }
.ds-empty-state .msg { color: var(--text-muted); font: var(--type-ui-base) var(--font-ui); margin: var(--sp-3) 0 var(--sp-4); }
.ds-empty-state .ds-btn { max-width: 220px; margin: 0 auto; }
.ds-empty-state--error .icon, .ds-empty-state--error { border-color: var(--semantic-error); }
.ds-empty-state--error .msg { color: var(--semantic-error); }

/* ---- 3.10 Notification / toast system ---- */
#ds-toast-stack {
  position: fixed; top: var(--sp-4); inset-inline: 0;
  z-index: var(--z-toast); display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-2); pointer-events: none;
}
.ds-toast {
  pointer-events: auto; display: flex; align-items: center;
  gap: var(--sp-2); max-width: 92vw; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-pill); font: var(--type-ui-md) var(--font-ui);
  box-shadow: var(--shadow-surface);
  animation: ds-toast-in var(--motion-base) var(--motion-settle) both;
}
@keyframes ds-toast-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
.ds-toast--success {
  background: color-mix(in srgb, var(--semantic-success) 15%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--semantic-success) 45%, transparent);
  color: var(--semantic-success);
}
.ds-toast--error {
  background: color-mix(in srgb, var(--semantic-error) 15%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--semantic-error) 45%, transparent);
  color: var(--semantic-error);
}
.ds-toast--info {
  background: var(--surface-1); border: 1px solid var(--line); color: var(--text-primary);
}

/* ---- 3.11 Timer / countdown component ---- */
.ds-timer {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  position: relative; max-width: 540px; margin: 0 auto;
  background: var(--surface-1); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: var(--sp-5) var(--sp-6) var(--sp-4);
  box-shadow: var(--shadow-surface);
}
.ds-timer::before {
  /* top accent stripe, same shape as .ds-card::before (section 3.2) */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--accent-signature);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.ds-timer-label {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-1);
  font: var(--type-ui-sm) var(--font-ui); font-weight: 800; letter-spacing: 2px;
  color: var(--text-muted);
}
.ds-timer-icon {
  display: none; /* shown only in .ds-timer--danger - see States/Accessibility below */
  font-size: 1em; line-height: 1;
}
.ds-timer-num {
  font: var(--type-numeral) var(--font-display);
  font-variant-numeric: tabular-nums; /* reuses section 1.7's numeral discipline verbatim, not
    reinvented - see Accessibility below for the exact citation */
  color: var(--text-primary); line-height: 1; text-align: center;
  direction: ltr; /* digits must never reverse - see RTL note below, same comment convention as
    the existing .join-url rule, style.css:218-219, per DESIGN_SPEC.md section 6 */
}
.ds-timer-bar {
  width: 100%; height: 12px; margin-top: var(--sp-1);
  background: var(--surface-0); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,.5) inset;
}
.ds-timer-bar > div {
  height: 100%; width: 100%; /* JS sets inline width:N% each tick */
  background: linear-gradient(90deg, var(--accent-signature), var(--semantic-success));
  transition: width .5s linear;
}

/* ---- States (JS toggles ONE modifier class on the .ds-timer root, not two separate classes
   on two separate descendants the way شخبطة's own .timer-num.danger / .timerbar.low pair does
   today - the one deliberate cleanup this component makes over its own migration source) ---- */
.ds-timer--warning .ds-timer-bar > div {
  background: linear-gradient(90deg, var(--accent-cta), var(--semantic-error));
  /* generalizes شخبطة's existing .timerbar.low > div swap (style.css:282), tokenized */
}
.ds-timer--warning .ds-timer-num { color: var(--accent-cta); }
.ds-timer--danger .ds-timer-num {
  color: var(--accent-cta);
  animation: ds-timer-pulse .8s ease-in-out infinite;
  /* generalizes شخبطة's clockPulse keyframe (style.css:279) verbatim in shape, tokenized in color */
}
.ds-timer--danger .ds-timer-icon { display: inline-flex; }
@keyframes ds-timer-pulse {
  0%, 100% { transform: scale(1); text-shadow: 0 0 0 transparent; }
  50% { transform: scale(1.16); text-shadow: 0 0 28px color-mix(in srgb, var(--accent-cta) 70%, transparent); }
}

/* ---- Sizes ---- */
/* Bare .ds-timer-num (no size modifier) defaults to --type-numeral's own raw clamp
   (3rem-6.5rem) - reserved for a genuinely standalone hero timer moment with no competing focal
   content on screen. No current screen needs this bare default; always apply one of the two
   named sizes below for real usage. */
.ds-timer--broadcast .ds-timer-num {
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  /* promotes سين جيم's own already-shipped, already-reasoned interim value
     (games/seenjeem/seenjeem.css, spec section 7.3) to a real named size: a broadcast timer
     that shares a card with other focal content (a prompt, a meta row, an answer panel) needs
     one step down from --type-numeral's raw hero clamp. TV/big-screen host surfaces use this. */
}
.ds-timer--compact {
  max-width: 300px; padding: var(--sp-3) var(--sp-4);
}
.ds-timer--compact .ds-timer-bar { height: 8px; }
.ds-timer--compact .ds-timer-num {
  font-size: 1.3rem; /* = var(--type-ui-lg)'s own size - promotes سين جيم's phone interim value
    (games/seenjeem/seenjeem.css, spec section 8.4) to a real named size. Phone/narrow-viewport
    surfaces use this. */
}
/* .ds-timer-sr: the aria-live screen-reader-only announcer described in DESIGN_SPEC.md section
   3.11's accessibility notes - visually hidden via the standard clip-rect technique (no existing
   sr-only utility class in this codebase to reuse, so this is that utility's first instance). */
.ds-timer-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =====================================================================
   Section 4 - motion / reduced-motion base rule
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .ds-dialog { opacity: 1; }
  .ds-dialog-sheet { transform: none; }
  .ds-toast { animation: none; }
  /* skin-specific reduced-motion overrides (e.g. #wipe { display:none }) stay in each skin's
     own file, layered on top of this base rule, exactly as شخبطة's already does */
}

/* =====================================================================
   Section 5 - accessibility: shared :focus-visible base rule
   ===================================================================== */
:focus-visible,
.ds-btn:focus-visible,
.ds-card[tabindex]:focus-visible,
.ds-input:focus-visible,
.ds-textarea:focus-visible,
.ds-toggle input:focus-visible + .ds-toggle-slider,
[role="button"]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}