/* ============================================================
   Eduvy Mobile — "Obsidian Editorial" · design tokens
   Brand gradient shared with the Eduvy web platform.
   Two co-equal themes: Porcelain (light, default) + Obsidian
   (dark, [data-theme="dark"]). Numerals are ALWAYS mono.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Geist+Mono:wght@400;500;600&family=Mukta:wght@400;500;600;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

:root {
  /* ---- Brand ---- */
  --grad-brand: linear-gradient(135deg, #d6217f 0%, #a8279a 55%, #7e2ea6 100%);
  --grad-soft: linear-gradient(135deg, rgba(214,33,127,.10), rgba(126,46,166,.10));
  --pink: #d6217f; --magenta: #a8279a; --purple: #7e2ea6;

  /* ---- Type ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'General Sans', 'Helvetica Neue', sans-serif;
  --font-mono: 'Geist Mono', 'IBM Plex Mono', monospace;
  --font-deva: 'Mukta', sans-serif;

  /* ---- Radii ---- */
  --r-chip: 8px; --r-sub: 14px; --r-card: 18px; --r-sheet: 26px; --r-pill: 999px;
  --r-frame: 56px; --r-screen: 44px;

  /* ---- Spacing (8pt) ---- */
  --s-1: 8px; --s-2: 16px; --s-gutter: 22px; --s-3: 24px; --s-4: 32px;
  --hit-min: 44px; --blur-card: 14px; --blur-bar: 22px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-enter: .7s; --enter-rise: 18px; --stagger: 70ms;
  --press-scale: .96; --ambient-loop: 22s;

  /* ====== PORCELAIN (light · default) ====== */
  --accent: #a8279a; --accent-strong: #7e2ea6; --accent-soft: rgba(168,39,154,.10); --on-accent:#fff;
  --ink: #1c1a24; --ink-soft: #3d3b48; --muted: #605e6c; --faint: #9a98a6;
  --bg: #f6f4fb; --surface: #ffffff; --surface-2: #faf8fd; --surface-3: #f3eff9;
  --border: #ece7f3; --border-strong: #ddd5ea;
  --focus-ring: rgba(126,46,166,.30); --glow: rgba(214,33,127,.18);
  --good:#15803d; --good-bg:#e7f4ec; --good-line:#bfe3cd;
  --warn:#b45309; --warn-bg:#fbf0e0; --warn-line:#f0d4ad;
  --bad:#b91c1c; --bad-bg:#fbe7e7; --bad-line:#f1c2c2;
  --info:#2563eb; --info-bg:#e6edfd; --info-line:#c2d2f7;
  --neutral:#4b5563; --neutral-bg:#eef0f3; --neutral-line:#d6dae1;
  --shadow-sm: 0 1px 2px rgba(33,31,41,.05);
  --shadow-card: 0 1px 2px rgba(33,31,41,.04), 0 6px 20px rgba(33,31,41,.05);
  --shadow-pop: 0 8px 28px rgba(33,31,41,.12), 0 2px 6px rgba(33,31,41,.06);
  --shadow-brand: 0 8px 22px rgba(168,39,154,.40);
  --frame: linear-gradient(155deg,#edebf3,#c9c2da);
}

:root[data-theme="dark"], [data-theme="dark"] {
  /* ====== OBSIDIAN (dark · glassmorphic aurora) ====== */
  --accent:#d6217f; --accent-strong:#c451c6; --accent-soft:rgba(214,33,127,.16);
  --ink:#ece7f6; --ink-soft:#c4bcd8; --muted:#8c84a6; --faint:#6e6688;
  --bg:#0c0916; --surface:rgba(31,24,48,.60); --surface-2:rgba(41,32,61,.58); --surface-3:rgba(53,41,77,.55);
  --border:rgba(174,134,234,.16); --border-strong:rgba(174,134,234,.32);
  --focus-ring:rgba(214,33,127,.45); --glow:rgba(214,33,127,.55);
  --good:#4ade80; --good-bg:rgba(74,222,128,.14); --good-line:rgba(74,222,128,.34);
  --warn:#fbbf24; --warn-bg:rgba(251,191,36,.14); --warn-line:rgba(251,191,36,.34);
  --bad:#f87171; --bad-bg:rgba(248,113,113,.14); --bad-line:rgba(248,113,113,.34);
  --info:#60a5fa; --info-bg:rgba(96,165,250,.14); --info-line:rgba(96,165,250,.34);
  --neutral:#9aa3b2; --neutral-bg:rgba(154,163,178,.14); --neutral-line:rgba(154,163,178,.30);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 8px 30px rgba(0,0,0,.45);
  --shadow-pop: 0 12px 40px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
  --shadow-brand: 0 8px 24px rgba(214,33,127,.4);
  --frame:#080510;
}

/* shimmer skeleton keyframes (used by Skeleton.jsx) */
@keyframes eduvy-shimmer { 0% { background-position:-160% 0; } 100% { background-position:260% 0; } }