/* fg7-tpl design tokens — single source of truth for the Index Press theme */
:root {
  /* Surface — OLED black ladder */
  --fg7-bg:           #08080a;
  --fg7-bg-elev:      #0d0d10;
  --fg7-surface-1:    #131316;
  --fg7-surface-2:    #1c1c20;
  --fg7-surface-3:    #26262c;
  --fg7-overlay:      rgba(8, 8, 10, .72);

  /* Borders — kept hairline on OLED to avoid grey halos */
  --fg7-border:       rgba(255, 255, 255, .06);
  --fg7-border-hi:    rgba(255, 255, 255, .12);
  --fg7-border-focus: rgba(251, 191, 36, .55);

  /* Text */
  --fg7-text:         #f4f4f5;
  --fg7-text-mute:    #a1a1aa;
  --fg7-text-dim:     #71717a;
  --fg7-text-ink:     #d4d4d8;

  /* Accent — restrained amber, CTA / focal numbers only */
  --fg7-accent:       #fbbf24;
  --fg7-accent-hi:    #fcd34d;
  --fg7-accent-ink:   #1a1408;
  --fg7-accent-soft:  rgba(251, 191, 36, .16);
  --fg7-accent-glow:  rgba(251, 191, 36, .35);

  /* Semantic */
  --fg7-danger:       #f87171;
  --fg7-ok:           #34d399;

  /* Radius — Bento signature */
  --fg7-r-xs: 8px;
  --fg7-r-sm: 12px;
  --fg7-r:    20px;
  --fg7-r-lg: 28px;
  --fg7-r-pill: 999px;

  /* Shadow — soft on OLED, avoid grey wash */
  --fg7-shadow-1: 0 1px 0 rgba(255, 255, 255, .04) inset,
                 0 8px 24px rgba(0, 0, 0, .45);
  --fg7-shadow-2: 0 1px 0 rgba(255, 255, 255, .06) inset,
                 0 12px 32px rgba(0, 0, 0, .55);
  --fg7-shadow-hover: 0 1px 0 rgba(255, 255, 255, .08) inset,
                     0 18px 48px rgba(0, 0, 0, .65),
                     0 0 0 1px var(--fg7-accent-soft);

  /* Typography */
  --fg7-font-sans: "Geist", "Inter", "Plus Jakarta Sans",
                  -apple-system, BlinkMacSystemFont, "PingFang SC",
                  "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --fg7-font-mono: "Geist Mono", "JetBrains Mono", ui-monospace,
                  "SF Mono", Menlo, Consolas, monospace;

  --fg7-fs-xs:  12px;
  --fg7-fs-sm:  13px;
  --fg7-fs-md:  15px;
  --fg7-fs-lg:  18px;
  --fg7-fs-xl:  22px;
  --fg7-fs-2xl: 28px;
  --fg7-fs-3xl: 36px;
  --fg7-fs-4xl: 48px;

  --fg7-fw-r: 400;
  --fg7-fw-m: 500;
  --fg7-fw-s: 600;
  --fg7-fw-b: 700;

  /* Spacing */
  --fg7-sp-1:  4px;
  --fg7-sp-2:  8px;
  --fg7-sp-3:  12px;
  --fg7-sp-4:  16px;
  --fg7-sp-5:  20px;
  --fg7-sp-6:  24px;
  --fg7-sp-8:  32px;
  --fg7-sp-10: 40px;
  --fg7-sp-12: 48px;
  --fg7-sp-16: 64px;

  /* Layout */
  --fg7-container: 1440px;
  --fg7-gap:       16px;
  --fg7-gap-lg:    24px;
  --fg7-nav-h:     64px;
  --fg7-nav-h-m:   56px;

  /* Motion */
  --fg7-ease:    cubic-bezier(.2, .8, .2, 1);
  --fg7-ease-out: cubic-bezier(.16, 1, .3, 1);
  --fg7-dur-1: 160ms;
  --fg7-dur-2: 240ms;
  --fg7-dur-3: 360ms;

  /* z-index ladder */
  --fg7-z-nav:    50;
  --fg7-z-drawer: 60;
  --fg7-z-modal:  70;
  --fg7-z-toast:  80;
}