/* ─────────────────────────────────────────────────────────────────────
   PaydaQuran · Design Tokens · LIGHT THEME · v0.1
   Two palette directions exposed via parent class:
     .pq-sand   — Sand & Ink   (warm sand · deep green · dark ink · gold)
     .pq-clay   — Paper & Clay (clay paper · deep green · terracotta · amber)
   Tokens are namespaced --pq-* so they coexist with Tailwind utilities and
   FlyonUI variables. Map to @theme inside app.css when porting.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* Spacing — 4-px scale (replaces ad-hoc 14/18/22/30/34/36 in current CSS) */
  --pq-sp-1: 4px;
  --pq-sp-2: 8px;
  --pq-sp-3: 12px;
  --pq-sp-4: 16px;
  --pq-sp-5: 24px;
  --pq-sp-6: 32px;
  --pq-sp-7: 48px;
  --pq-sp-8: 64px;

  /* Radii — ограничены, без хаоса 22/26/34/36 */
  --pq-r-sm: 8px;
  --pq-r-md: 12px;
  --pq-r-lg: 16px;
  --pq-r-xl: 20px;
  --pq-r-pill: 999px;

  /* Type — Newsreader (book serif headlines), Inter (UI), Arabic by theme override */
  --pq-font-serif: "Newsreader", ui-serif, Georgia, serif;
  --pq-font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pq-font-arabic: "Scheherazade New", "Noto Naskh Arabic", "Amiri", serif;

  /* Color-scheme — drives UA form controls + scrollbars */
  color-scheme: light;

  /* Size scale (rem) */
  --pq-fs-micro:   0.6875rem; /* 11 — only badges */
  --pq-fs-eyebrow: 0.75rem;   /* 12 — eyebrows / caps */
  --pq-fs-caption: 0.8125rem; /* 13 */
  --pq-fs-body:    0.9375rem; /* 15 */
  --pq-fs-body-lg: 1rem;      /* 16 */
  --pq-fs-h3:      1.25rem;   /* 20 */
  --pq-fs-h2:      1.5rem;    /* 24 */
  --pq-fs-h1:      2rem;      /* 32 */
  --pq-fs-display: 2.75rem;   /* 44 */
  --pq-fs-arabic:  2.5rem;    /* 40 default; ranges 90–145% via --arabic-scale */

  --pq-lh-tight:  1.15;
  --pq-lh-snug:   1.4;
  --pq-lh-normal: 1.6;
  --pq-lh-arabic: 2.0;        /* critical — Arabic needs huge line-height */

  --pq-tracking-eyebrow: 0.10em; /* было 0.12–0.20 — сдержаннее */
  --pq-tracking-caps:    0.04em;

  /* Motion */
  --pq-ease: cubic-bezier(.2, .8, .2, 1);
  --pq-dur-1: 120ms;
  --pq-dur-2: 180ms;

  /* Focus — единое кольцо для доступности */
  --pq-focus-ring: 0 0 0 3px var(--pq-focus-color);
}

/* ───────────── SAND & INK ─────────────────────────────────────────── */
.pq-sand {
  /* Surfaces */
  --pq-bg:           #f4eee0;     /* page background — чуть теплее off-white */
  --pq-bg-soft:      #faf5e9;     /* light strip */
  --pq-surface:      #fbf6ea;     /* card paper */
  --pq-surface-2:    #efe8d6;     /* recessed strip (inputs, segment track) */
  --pq-surface-hi:   #ffffff;     /* elevated card / sticky player */

  /* Border */
  --pq-border:        rgba(31, 42, 37, 0.08);
  --pq-border-strong: rgba(31, 42, 37, 0.16);

  /* Ink (text) */
  --pq-ink-900: #14201b;  /* display, max-contrast */
  --pq-ink-700: #25332c;  /* body default */
  --pq-ink-500: #5d6b62;  /* secondary */
  --pq-ink-300: #94a098;  /* tertiary, captions */
  --pq-ink-mute: rgba(20, 32, 27, 0.06); /* hover tint, pill bg */

  /* Brand */
  --pq-brand:       #10382d;     /* deep green primary */
  --pq-brand-hover: #174f3f;
  --pq-brand-ink:   #fbf7ed;     /* text on brand */
  --pq-brand-soft:  rgba(16, 56, 45, 0.08);
  --pq-brand-soft-2: rgba(16, 56, 45, 0.14);

  /* Accent (gold — sparingly: progress, playing-state, active border) */
  --pq-gold:        #b8843c;
  --pq-gold-hover:  #a37029;
  --pq-gold-soft:   rgba(184, 132, 60, 0.14);

  /* Semantic */
  --pq-success:     #2e7d57;
  --pq-success-soft: rgba(46, 125, 87, 0.10);
  --pq-warning:     #b8843c;     /* доделить с gold — единый янтарь */
  --pq-danger:      #a23a2c;
  --pq-danger-soft: rgba(162, 58, 44, 0.10);

  /* Shadows — 3 уровня (вместо нынешних 80px-монстров) */
  --pq-shadow-0: none;
  --pq-shadow-1: 0 1px 2px rgba(20, 32, 27, .06);
  --pq-shadow-2: 0 8px 24px -16px rgba(20, 32, 27, .18),
                 0 2px 6px -2px  rgba(20, 32, 27, .06);

  /* Focus */
  --pq-focus-color: rgba(16, 56, 45, 0.32);
}

/* ───────────── PAPER & CLAY ───────────────────────────────────────── */
.pq-clay {
  /* Surfaces — warmer, slightly redder paper */
  --pq-bg:           #ece2cd;
  --pq-bg-soft:      #f3ead7;
  --pq-surface:      #fdf6e7;
  --pq-surface-2:    #e6dbc3;
  --pq-surface-hi:   #fffaee;

  --pq-border:        rgba(67, 44, 22, 0.10);
  --pq-border-strong: rgba(67, 44, 22, 0.20);

  --pq-ink-900: #1f1408;
  --pq-ink-700: #3a2914;
  --pq-ink-500: #7a6747;
  --pq-ink-300: #aa9776;
  --pq-ink-mute: rgba(31, 20, 8, 0.06);

  --pq-brand:       #163f30;
  --pq-brand-hover: #1c5340;
  --pq-brand-ink:   #fcf6e7;
  --pq-brand-soft:  rgba(22, 63, 48, 0.10);
  --pq-brand-soft-2: rgba(22, 63, 48, 0.18);

  --pq-gold:        #c39142;
  --pq-gold-hover:  #aa7a2d;
  --pq-gold-soft:   rgba(195, 145, 66, 0.18);

  --pq-success:     #2e7d57;
  --pq-success-soft: rgba(46, 125, 87, 0.12);
  --pq-warning:     #c39142;
  --pq-danger:      #7d3b2a;          /* clay terracotta — character accent */
  --pq-danger-soft: rgba(125, 59, 42, 0.12);

  --pq-shadow-0: none;
  --pq-shadow-1: 0 1px 2px rgba(45, 25, 10, .07);
  --pq-shadow-2: 0 10px 28px -18px rgba(45, 25, 10, .22),
                 0 2px 6px  -2px   rgba(45, 25, 10, .08);

  --pq-focus-color: rgba(22, 63, 48, 0.30);

  /* Arabic display ink — brand-deep-green on light, lifted on dark */
  --pq-arabic-display: var(--pq-brand);

  color-scheme: light;
}

/* ───────────── PAPER & CLAY · DARK ────────────────────────────────── */
/* Night-reading variant. Brand lifts to mint-sage so it stays visible.
   Arabic display switches to warm cream — never green-on-dark. All four
   SRS-grading colors hold their semantic separation (terracotta/gold/
   brand-soft/brand-filled) at AA contrast on the dark surface. */
.pq-clay.is-dark {
  /* Surfaces — warm umber, never pure black */
  --pq-bg:           #1a1410;
  --pq-bg-soft:      #221a13;
  --pq-surface:      #261e16;
  --pq-surface-2:    #1e1812;
  --pq-surface-hi:   #2d2519;

  --pq-border:        rgba(245, 225, 195, 0.08);
  --pq-border-strong: rgba(245, 225, 195, 0.20);

  /* Ink — warm cream */
  --pq-ink-900: #f4ead4;   /* AA on bg-#1a1410: 13.4:1 ✓ */
  --pq-ink-700: #d9cdb1;   /* AA on bg: 10.1:1 ✓ */
  --pq-ink-500: #a89878;   /* AA on bg: 5.7:1  ✓ */
  --pq-ink-300: #756c58;
  --pq-ink-mute: rgba(245, 225, 195, 0.06);

  /* Brand — lifted to mint-sage so it READS on warm-dark surfaces.
     Deep green #163f30 is invisible at night; #5fb892 holds the same
     hue at higher lightness (sage, scholarly, not neon). */
  --pq-brand:       #5fb892;     /* AA on bg: 5.9:1 ✓ */
  --pq-brand-hover: #7fcaa8;
  --pq-brand-ink:   #0e2e23;     /* dark green for text on brand-filled buttons */
  --pq-brand-soft:  rgba(95, 184, 146, 0.14);
  --pq-brand-soft-2: rgba(95, 184, 146, 0.30);

  /* Gold accent — slightly brighter so playing-state stays warm but distinct */
  --pq-gold:        #e2b56b;     /* AA on bg: 7.7:1 ✓ */
  --pq-gold-hover:  #eec585;
  --pq-gold-soft:   rgba(226, 181, 107, 0.18);

  /* Semantic — kept perceptually separate at night. Each is a *lifted*
     version of its light counterpart. terracotta and gold do not collide;
     brand-soft and brand-filled are visibly different states. */
  --pq-success:     #5fb892;
  --pq-success-soft: rgba(95, 184, 146, 0.16);
  --pq-warning:     #e2b56b;
  --pq-danger:      #d97c5e;     /* AA on bg: 5.0:1 ✓ — clearly red-orange, distinct from gold */
  --pq-danger-soft: rgba(217, 124, 94, 0.16);

  /* Shadows deeper / darker on night */
  --pq-shadow-0: none;
  --pq-shadow-1: 0 1px 2px rgba(0, 0, 0, .45);
  --pq-shadow-2: 0 12px 32px -10px rgba(0, 0, 0, .60),
                 0 2px 8px  -2px   rgba(0, 0, 0, .35);

  --pq-focus-color: rgba(95, 184, 146, 0.45);

  /* Arabic display — switches to warm cream, the most book-like ink at night */
  --pq-arabic-display: var(--pq-ink-900);

  color-scheme: dark;
}