/* ═══════════════════════════════════════════════════
   base.css — global reset, typography, custom props,
               RTL foundation, Eitaa theme wiring
════════════════════════════════════════════════════ */

/* ── Design tokens ─────────────────────────────── */
:root {
  /* Colour system — light defaults; Eitaa theme overrides these at runtime */
  --c-bg:            #f5f4ef;
  --c-surface:       #ffffff;
  --c-surface-alt:   #eeede6;
  --c-border:        #c8c5b8;
  --c-text:          #1a1917;
  --c-text-muted:    #6b6860;
  --c-accent:        #b85c00;   /* amber — arrow active */
  --c-accent-soft:   #f5e6d3;
  --c-accent-dim:    #7a3d00;
  --c-solved:        #2e7d32;   /* green — cell solved */
  --c-solved-soft:   #e8f5e9;
  --c-target:        #7b1fa2;   /* purple — target cell */
  --c-target-soft:   #f3e5f5;
  --c-danger:        #c62828;
  --c-score:         #0d47a1;

  /* Tonal surface for cards */
  --c-card:          var(--c-surface);
  --c-card-border:   var(--c-border);

  /* Typography */
  --ff-base: 'Vazirmatn', 'Tahoma', 'Arial Unicode MS', system-ui, sans-serif;
  --ff-mono: 'Courier New', monospace;

  --fs-xs:  0.75rem;
  --fs-sm:  0.875rem;
  --fs-md:  1rem;
  --fs-lg:  1.125rem;
  --fs-xl:  1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.5rem;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;

  --lh-tight:  1.2;
  --lh-base:   1.6;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* Radius */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.16);

  /* Motion */
  --dur-fast:   120ms;
  --dur-normal: 220ms;
  --dur-slow:   380ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Safe areas — Eitaa SDK sets these CSS variables; fallback to env() */
  --safe-top:    max(var(--tg-safe-area-inset-top,    0px), env(safe-area-inset-top,    0px));
  --safe-bottom: max(var(--tg-safe-area-inset-bottom, 0px), env(safe-area-inset-bottom, 0px));
  --safe-left:   max(var(--tg-safe-area-inset-left,   0px), env(safe-area-inset-left,   0px));
  --safe-right:  max(var(--tg-safe-area-inset-right,  0px), env(safe-area-inset-right,  0px));

  /* Content safe areas (inside header/toolbar) */
  --csafe-top:    var(--tg-content-safe-area-inset-top,    0px);
  --csafe-bottom: var(--tg-content-safe-area-inset-bottom, 0px);

  /* Viewport height from Eitaa (stable = excludes collapsing browser UI) */
  --vh: var(--tg-viewport-stable-height, 100dvh);
}

/* ── Dark theme ─────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg:           #121212;
    --c-surface:      #1e1e1e;
    --c-surface-alt:  #2a2a2a;
    --c-border:       #3a3a3a;
    --c-text:         #e8e6e0;
    --c-text-muted:   #9e9b93;
    --c-accent:       #e67e22;
    --c-accent-soft:  #3d2007;
    --c-accent-dim:   #f0a05a;
    --c-solved:       #43a047;
    --c-solved-soft:  #1b3a1c;
    --c-target:       #ab47bc;
    --c-target-soft:  #2e1535;
    --c-score:        #42a5f5;
  }
}

/* Class applied by eitaa.js when Eitaa SDK provides dark colorScheme */
body.theme-dark {
  --c-bg:           #121212;
  --c-surface:      #1e1e1e;
  --c-surface-alt:  #2a2a2a;
  --c-border:       #3a3a3a;
  --c-text:         #e8e6e0;
  --c-text-muted:   #9e9b93;
  --c-accent:       #e67e22;
  --c-accent-soft:  #3d2007;
  --c-accent-dim:   #f0a05a;
  --c-solved:       #43a047;
  --c-solved-soft:  #1b3a1c;
  --c-target:       #ab47bc;
  --c-target-soft:  #2e1535;
  --c-score:        #42a5f5;
}

/* Class applied by eitaa.js for light */
body.theme-light {
  --c-bg:           #f5f4ef;
  --c-surface:      #ffffff;
  --c-surface-alt:  #eeede6;
  --c-border:       #c8c5b8;
  --c-text:         #1a1917;
  --c-text-muted:   #6b6860;
  --c-accent:       #b85c00;
  --c-accent-soft:  #f5e6d3;
  --c-accent-dim:   #7a3d00;
  --c-solved:       #2e7d32;
  --c-solved-soft:  #e8f5e9;
  --c-target:       #7b1fa2;
  --c-target-soft:  #f3e5f5;
  --c-score:        #0d47a1;
}

/* ── Reset ──────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--ff-base);
  font-size: var(--fs-md);
  font-weight: var(--fw-normal);
  line-height: var(--lh-base);
  color: var(--c-text);
  background-color: var(--c-bg);
  direction: rtl;
  text-align: start;
  -webkit-font-smoothing: antialiased;
  /* Use stable viewport height from Eitaa when available */
  min-height: var(--vh);
  overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-text);
}

p { line-height: var(--lh-base); }

ol, ul { list-style-position: inside; }

/* ── Buttons ────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
  padding-inline: var(--sp-6);
  border: 2px solid transparent;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color            var(--dur-fast) var(--ease-out),
    border-color     var(--dur-fast) var(--ease-out),
    transform        var(--dur-fast) var(--ease-out),
    box-shadow       var(--dur-fast) var(--ease-out);
  min-height: 48px;  /* comfortable touch target */
}

.btn:active { transform: scale(0.96); }

.btn:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}

.btn--primary {
  background-color: var(--c-accent);
  color: #fff;
}
.btn--primary:hover { background-color: var(--c-accent-dim); }

.btn--secondary {
  background-color: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border);
}
.btn--secondary:hover {
  background-color: var(--c-surface-alt);
}

.btn--ghost {
  background-color: transparent;
  color: var(--c-text-muted);
  border-color: var(--c-border);
}
.btn--ghost:hover { background-color: var(--c-surface-alt); }

.btn--large {
  font-size: var(--fs-lg);
  padding-block: var(--sp-4);
  padding-inline: var(--sp-8);
  min-height: 56px;
}

.btn--icon {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: var(--r-full);
  font-size: var(--fs-xl);
  flex-shrink: 0;
}

.btn--hint { background-color: var(--c-surface-alt); border-color: var(--c-border); }

/* ── Utility ─────────────────────────────────────── */
.hidden { display: none !important; }

.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;
}

/* ── Reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Focus ring for keyboard users ─────────────── */
:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }