/* ============================================================
   TextToolKit v2 — Design Tokens (GitHub Design Language)
   ============================================================ */

:root {
  /* ── Colors: Dark Mode (Default) ───────────────────────── */
  --bg-default:          #0d1117;
  --bg-subtle:           #0d1117;
  --bg-elevated:         #161b22;
  --surface-primary:     #0d1117;
  --surface-secondary:   #161b22;
  --surface-tertiary:    #21262d;

  --text-primary:        #e6edf3;
  --text-secondary:      #8b949e;
  --text-muted:          #7d8590;
  --text-faint:          #484f58;
  --text-inverse:        #000000;

  --border-default:      #30363d;
  --border-soft:         #21262d;
  --border-strong:       #484f58;

  --brand-blue:          #2f81f7;
  --brand-blue-hover:    #388bfd;
  --brand-blue-soft:     rgba(47, 129, 247, 0.15);
  --brand-emphasis:      #0969da;
  --brand-on:            #ffffff;

  --link-blue:           #58a6ff;
  --link-blue-hover:     #79c0ff;

  --cta-bg:              #ffffff;
  --cta-text:            #000000;
  --cta-hover:           #d2d2d2;

  --success:             #3fb950;
  --warning:             #d29922;
  --danger:              #f85149;
  --info:                #58a6ff;

  /* Bento decorative accents */
  --bento-coral:         #ff6b6b;
  --bento-lemon:         #ffd43b;
  --bento-indigo:        #7c5cff;
  --bento-pink:          #ff7eb6;
  --bento-cyan:          #56d4dd;

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

  --section-padding:    96px;
  --section-padding-sm: 48px;
  --page-max-width:     1280px;

  /* ── Radius Scale ───────────────────────────────────────── */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── Typography ──────────────────────────────────────────── */
  --font-display: "Inter", "InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", "InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;

  --text-hero:     64px;
  --text-h1:       48px;
  --text-h2:       40px;
  --text-h3:       32px;
  --text-h4:       24px;
  --text-lg:       16px;
  --text-body:     14px;
  --text-sm:       13px;
  --text-caption:  12px;
  --text-micro:    11px;

  --leading-tight:  1.08;
  --leading-snug:   1.15;
  --leading-normal: 1.50;
  --leading-relaxed:1.55;

  --tracking-tight:  -0.03em;
  --tracking-normal: 0;

  --fw-light:    400;
  --fw-book:     425;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-card: 0 1px 0 var(--border-default);
  --shadow-drop: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* ── Transitions ─────────────────────────────────────────── */
  --duration-fast:  150ms;
  --duration-normal:250ms;
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Light Mode Override ──────────────────────────────────── */
[data-color-mode="light"] {
  --bg-default:          #ffffff;
  --bg-subtle:           #f6f8fa;
  --bg-elevated:         #eaeef2;
  --surface-primary:     #ffffff;
  --surface-secondary:   #f6f8fa;
  --surface-tertiary:    #d0d7de;

  --text-primary:        #1f2328;
  --text-secondary:      #656d76;
  --text-muted:          #6e7781;
  --text-faint:          #8c959f;
  --text-inverse:        #ffffff;

  --border-default:      #d0d7de;
  --border-soft:         #eaeef2;
  --border-strong:       #afb8c1;

  --brand-blue:          #0969da;
  --brand-blue-hover:    #0550ae;
  --brand-blue-soft:     rgba(9, 105, 218, 0.10);
  --brand-on:            #ffffff;

  --link-blue:           #0969da;
  --link-blue-hover:     #0550ae;

  --cta-bg:              #1f2328;
  --cta-text:            #ffffff;
  --cta-hover:           #000000;

  --shadow-card: 0 1px 0 var(--border-default);
  --shadow-drop: 0 8px 24px rgba(31, 35, 40, 0.12);
}

/* Light mode applied exclusively via [data-color-mode="light"];
   system preference auto-detection handled by theme.js init() */