/* =====================================================================
   theme.css — Tezily design tokens (THE single place to re-theme).
   Edit the variables below; every surface, accent, tint, font, radius and
   shadow in app.css derives from these. Tints use color-mix() off the base
   accents, so changing one accent re-colours its tints app-wide.
   ===================================================================== */
/* ===== Professional self-hosted fonts ===== */
  @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/inter-400.woff2') format('woff2');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/inter-500.woff2') format('woff2');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/inter-600.woff2') format('woff2');}
  @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/inter-700.woff2') format('woff2');}
  @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/jbmono-400.woff2') format('woff2');}
  @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/jbmono-500.woff2') format('woff2');}
  @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/jbmono-600.woff2') format('woff2');}

  /* ===================== THEME TOKENS ===================== */
  :root, :root[data-theme="dark"]{
    --bg:#0B1220;
    --app-bg:
      radial-gradient(1200px 600px at 78% -8%, rgba(34,211,238,.06), transparent 60%),
      radial-gradient(900px 500px at 6% 4%, rgba(52,211,153,.05), transparent 55%),
      #0B1220;
    --panel:#0E1726;
    --panel-2:#0C1525;
    --sidebar-grad:linear-gradient(180deg,#0C1422,#0A0F1A);
    --topbar-bg:rgba(11,18,32,.82);
    --border:#1E293B;
    --border-soft:#172033;
    --text:#E5E7EB;
    --text-strong:#F4FBF8;
    --muted:#94A3B8;
    --muted-2:#64748B;
    --fill-soft:rgba(255,255,255,.02);
    --fill-soft-2:rgba(255,255,255,.035);
    --track:#0A1322;
    --period-on-bg:#16233A;
    --period-on-text:#EAF2FF;
    --nav-active:#EAFBF4;
    --coldbar-t:#CFFAFE;

    /* vivid accents (dots, strokes, donut, glows, solid buttons) — same both themes */
    --emerald:#34D399; --emerald-dim:#10B981; --cyan:#22D3EE; --amber:#FBBF24; --rose:#FB7185; --indigo:#818CF8;
    /* readable-on-surface accent text */
    --ink-emerald:#34D399; --ink-cyan:#22D3EE; --ink-amber:#FBBF24; --ink-rose:#FB7185; --ink-indigo:#818CF8;

    --cold-bg:linear-gradient(180deg,#15161A,#120F0B);
    --cold-num:#FCE9B7; --cold-text:#E7CF9A;

    --r-sm:8px; --r:12px; --r-lg:16px; --sp:8px;
    --mono:'JetBrains Mono',ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
    --sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --shadow:0 1px 0 rgba(255,255,255,.02) inset, 0 12px 30px -16px rgba(0,0,0,.7);
    --glow-amber:0 0 0 1px rgba(251,191,36,.45), 0 0 28px -4px rgba(251,191,36,.35);
    /* semantic gradients (chrome) — derive from base accents */
    --grad-cool:linear-gradient(90deg,var(--emerald),var(--cyan));
    --grad-warn:linear-gradient(90deg,var(--amber),var(--rose));
    --grad-accent:linear-gradient(180deg,var(--emerald),var(--emerald-dim));
    --grad-avatar:linear-gradient(150deg,var(--emerald),var(--cyan));
  }

  :root[data-theme="light"]{
    --bg:#F3F5FA;
    --app-bg:
      radial-gradient(1200px 600px at 80% -10%, rgba(34,211,238,.10), transparent 60%),
      radial-gradient(900px 520px at 4% 2%, rgba(52,211,153,.09), transparent 55%),
      #F3F5FA;
    --panel:#FFFFFF;
    --panel-2:#FBFCFE;
    --sidebar-grad:linear-gradient(180deg,#FFFFFF,#F6F8FC);
    --topbar-bg:rgba(248,250,253,.85);
    --border:#E3E8F0;
    --border-soft:#EDF1F7;
    --text:#3B475A;
    --text-strong:#0F172A;
    --muted:#64748B;
    --muted-2:#94A3B8;
    --fill-soft:rgba(15,23,42,.025);
    --fill-soft-2:rgba(15,23,42,.045);
    --track:#E7ECF4;
    --period-on-bg:#EAF1FB;
    --period-on-text:#0F172A;
    --nav-active:#065F46;
    --coldbar-t:#0E7490;

    --ink-emerald:#047857; --ink-cyan:#0E7490; --ink-amber:#B45309; --ink-rose:#E11D48; --ink-indigo:#4F46E5;

    --cold-bg:linear-gradient(180deg,#FFFBF2,#FFF5E4);
    --cold-num:#B45309; --cold-text:#92662B;

    --shadow:0 1px 2px rgba(15,23,42,.05), 0 10px 26px -14px rgba(15,23,42,.18);
    --glow-amber:0 0 0 1px rgba(251,191,36,.55), 0 0 24px -6px rgba(245,158,11,.28);
  }