/* =========================================================================
   Design tokens
   One source of truth for color, type, spacing and motion. Every other CSS
   file reads these custom properties instead of hard-coding values, so the
   whole theme (including light/dark) is controlled from this file alone.
   ========================================================================= */

:root{
  /* ---- static tokens (identical in both themes) ---- */
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-persian:'Vazirmatn', 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-mono:'JetBrains Mono', 'Vazirmatn', ui-monospace, 'SFMono-Regular', monospace;
  --radius:16px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --bg-card:var(--surface);
  --bg-card-hover:var(--surface-2);
  --text-secondary:var(--text-dim);
  --text-muted:var(--text-faint);
  --sat:env(safe-area-inset-top, 0px);
  --sab:env(safe-area-inset-bottom, 0px);
  --sal:env(safe-area-inset-left, 0px);
  --sar:env(safe-area-inset-right, 0px);
  --nav-base-h:76px;
  --nav-h:calc(var(--nav-base-h) + var(--sat));
  --ease:cubic-bezier(.4,0,.2,1);
}

:root[dir="rtl"]{
  --font-display:var(--font-persian);
}

@media(max-width:959px){
  :root{
    --nav-base-h:60px;
  }
}

:root{

  /* ---- dark theme (default) ---- */
  --bg:#08080a;
  --bg-elev:#101013;
  --surface:#141417;
  --surface-2:#1b1b1f;
  --border:#26262c;
  --text:#f2f2f4;
  --text-dim:#a8a8b4;
  --text-faint:#8e8e98;
  --accent:#38e07a;
  --accent-strong:#5cf29a;
  --accent-soft:rgba(56,224,122,.12);
  --accent-glow:rgba(56,224,122,.09);
  --rim-light:rgba(255,232,205,.16);
  --btn-primary-bg:#ffffff;
  --btn-primary-text:#08080a;
  --btn-primary-glow:rgba(255,255,255,.14);
  --overlay-05:rgba(255,255,255,.05);
  --overlay-12:rgba(255,255,255,.12);
  --overlay-18:rgba(255,255,255,.18);
  --selection-fg:#08080a;
  --scrollbar-thumb:rgba(255,255,255,.20);
  --scrollbar-thumb-hover:var(--accent);
  --hero-shadow:radial-gradient(ellipse 88% 76% at 50% 46%, rgba(20, 20, 24, 0.70) 0%, rgba(56, 224, 122, 0.04) 48%, transparent 80%);
  --hero-drop-shadow:none;
  --forge-card-bg:linear-gradient(135deg, rgba(20, 20, 23, 0.90) 0%, rgba(14, 14, 17, 0.95) 100%);
  --forge-card-border:rgba(56, 224, 122, 0.35);
  --forge-card-shadow:0 0 24px rgba(56, 224, 122, 0.10), inset 0 1px 0 rgba(255,255,255,0.08);
  --forge-card-hover-shadow:0 0 32px var(--accent-glow), 0 8px 24px rgba(0,0,0,0.35);
  --forge-icon-bg:var(--accent-soft);
  --forge-icon-border:rgba(56, 224, 122, 0.30);
  --forge-icon-color:var(--accent);
  --forge-icon-handle:#ffffff;
  --gitea-nav-handle:#ffffff;
  --scheme:dark;
}

/* Follow the OS preference until the person makes an explicit choice.
   ThemeManager (js/theme.js) sets [data-theme] on <html> the moment a
   choice is made or restored, which always wins over this block. */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f4f5f2;
    --bg-elev:#ffffff;
    --surface:#ffffff;
    --surface-2:#e8ebe6;
    --border:#dee2dc;
    --text:#0b0e0c;
    --text-dim:#3d443c;
    --text-faint:#5e645d;
    --accent:#0e8f4f;
    --accent-strong:#0b7a44;
    --accent-soft:rgba(14,143,79,.10);
    --accent-glow:rgba(14,143,79,.10);
    --rim-light:rgba(255,214,170,.28);
    --btn-primary-bg:#0b0e0c;
    --btn-primary-text:#f4f5f2;
    --btn-primary-glow:rgba(11,14,12,.14);
    --overlay-05:rgba(11,14,12,.04);
    --overlay-12:rgba(11,14,12,.08);
    --overlay-18:rgba(11,14,12,.12);
    --selection-fg:#f4f5f2;
    --scrollbar-thumb:rgba(0,0,0,.22);
    --scrollbar-thumb-hover:var(--accent);
    --hero-shadow:radial-gradient(ellipse 88% 76% at 50% 46%, rgba(255, 255, 255, 0.50) 0%, rgba(14, 143, 79, 0.04) 48%, transparent 80%);
    --hero-drop-shadow:none;
    --forge-card-bg:linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 244, 241, 0.92) 100%);
    --forge-card-border:rgba(14, 143, 79, 0.28);
    --forge-card-shadow:0 8px 24px -4px rgba(14, 143, 79, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    --forge-card-hover-shadow:0 14px 32px -6px rgba(14, 143, 79, 0.22), 0 4px 12px rgba(0, 0, 0, 0.05), 0 0 20px var(--accent-glow);
    --forge-icon-bg:var(--accent);
    --forge-icon-border:var(--accent);
    --forge-icon-color:#ffffff;
    --forge-icon-handle:#ffffff;
    --gitea-nav-handle:currentColor;
    --scheme:light;
  }
}

:root[data-theme="dark"]{
  --bg:#08080a; --bg-elev:#101013; --surface:#141417; --surface-2:#1b1b1f;
  --border:#26262c; --text:#f2f2f4; --text-dim:#a8a8b4; --text-faint:#8e8e98;
  --accent:#38e07a; --accent-strong:#5cf29a; --accent-soft:rgba(56,224,122,.12);
  --accent-glow:rgba(56,224,122,.09); --rim-light:rgba(255,232,205,.16);
  --btn-primary-bg:#ffffff; --btn-primary-text:#08080a; --btn-primary-glow:rgba(255,255,255,.14);
  --overlay-05:rgba(255,255,255,.05); --overlay-12:rgba(255,255,255,.12); --overlay-18:rgba(255,255,255,.18);
  --selection-fg:#08080a; --scrollbar-thumb:rgba(255,255,255,.20); --scrollbar-thumb-hover:var(--accent);
  --hero-shadow:radial-gradient(ellipse 88% 76% at 50% 46%, rgba(20, 20, 24, 0.70) 0%, rgba(56, 224, 122, 0.04) 48%, transparent 80%);
  --hero-drop-shadow:none;
  --forge-card-bg:linear-gradient(135deg, rgba(20, 20, 23, 0.90) 0%, rgba(14, 14, 17, 0.95) 100%);
  --forge-card-border:rgba(56, 224, 122, 0.35);
  --forge-card-shadow:0 0 24px rgba(56, 224, 122, 0.10), inset 0 1px 0 rgba(255,255,255,0.08);
  --forge-card-hover-shadow:0 0 32px var(--accent-glow), 0 8px 24px rgba(0,0,0,0.35);
  --forge-icon-bg:var(--accent-soft);
  --forge-icon-border:rgba(56, 224, 122, 0.30);
  --forge-icon-color:var(--accent);
  --forge-icon-handle:#ffffff;
  --gitea-nav-handle:#ffffff;
  --scheme:dark;
}

:root[data-theme="light"]{
  --bg:#f4f5f2; --bg-elev:#ffffff; --surface:#ffffff; --surface-2:#e8ebe6;
  --border:#dee2dc; --text:#0b0e0c; --text-dim:#3d443c; --text-faint:#5e645d;
  --accent:#0e8f4f; --accent-strong:#0b7a44; --accent-soft:rgba(14,143,79,.10);
  --accent-glow:rgba(14,143,79,.10); --rim-light:rgba(255,214,170,.28);
  --btn-primary-bg:#0b0e0c; --btn-primary-text:#f4f5f2; --btn-primary-glow:rgba(11,14,12,.14);
  --overlay-05:rgba(11,14,12,.04); --overlay-12:rgba(11,14,12,.08); --overlay-18:rgba(11,14,12,.12);
  --selection-fg:#f4f5f2; --scrollbar-thumb:rgba(0,0,0,.22); --scrollbar-thumb-hover:var(--accent);
  --hero-shadow:radial-gradient(ellipse 88% 76% at 50% 46%, rgba(255, 255, 255, 0.50) 0%, rgba(14, 143, 79, 0.04) 48%, transparent 80%);
  --hero-drop-shadow:none;
  --forge-card-bg:linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 244, 241, 0.92) 100%);
  --forge-card-border:rgba(14, 143, 79, 0.28);
  --forge-card-shadow:0 8px 24px -4px rgba(14, 143, 79, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --forge-card-hover-shadow:0 14px 32px -6px rgba(14, 143, 79, 0.22), 0 4px 12px rgba(0, 0, 0, 0.05), 0 0 20px var(--accent-glow);
  --forge-icon-bg:var(--accent);
  --forge-icon-border:var(--accent);
  --forge-icon-color:#ffffff;
  --forge-icon-handle:#ffffff;
  --gitea-nav-handle:currentColor;
  --scheme:light;
}