/* ───────────────────────────────────────────────────────────
   DEEP RABBIT — Design Tokens
   iOS 26 native idiom + premium indie game surfaces
   ─────────────────────────────────────────────────────────── */

:root {
  /* — Brand — */
  --brand-primary: #FF6B35;
  --brand-primary-hover: #E85A28;
  --brand-primary-tint: #FFF1EB;
  --brand-secondary: #4ECDC4;
  --brand-secondary-hover: #3FB8AF;
  --brand-secondary-tint: #E8F8F7;
  --brand-deep: #1F2937;

  /* — Status / accent — */
  --success: #22C55E;
  --success-tint: #E6F8EC;
  --warning: #F59E0B;
  --warning-tint: #FDF2DC;
  --danger:  #EF4444;
  --danger-tint:  #FDE8E8;
  --streak:  #FB923C;

  /* — Surfaces (light) — */
  --canvas: #FAFAF7;
  --canvas-soft: #F2F2EE;
  --elevated: #FFFFFF;
  --elevated-2: #FAFAF6;
  --hairline: rgba(60,60,67,0.12);
  --hairline-strong: rgba(60,60,67,0.22);
  --scrim: rgba(0,0,0,0.05);

  /* — Text (light) — */
  --ink: #0E1320;
  --ink-2: rgba(60,60,67,0.85);
  --ink-3: rgba(60,60,67,0.6);
  --ink-4: rgba(60,60,67,0.35);

  /* — Glass tokens — */
  --glass-bg: rgba(255,255,255,0.55);
  --glass-tint: rgba(255,255,255,0.7);
  --glass-stroke: rgba(0,0,0,0.06);
  --glass-shine: rgba(255,255,255,0.7);

  /* — Code block (always-dark) — */
  --code-bg: #1A2030;
  --code-bg-elev: #232B40;
  --code-line: rgba(255,255,255,0.06);
  --code-fg: #E6E9F0;
  --code-keyword: #F472B6;   /* pink — class, func, let, var */
  --code-type: #7DD3FC;      /* sky — Int, String, custom types */
  --code-string: #FCA974;    /* rust — string literals */
  --code-num: #5EEAD4;       /* teal — number literals */
  --code-comment: #6B7693;   /* slate */
  --code-fn: #FDE68A;        /* soft gold — function names */
  --code-plain: #DDE2EF;

  /* — Radii — */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-5: 26px;
  --r-6: 34px;
  --r-pill: 999px;

  /* — Type — */
  --font-rounded: "SF Pro Rounded", -apple-system, "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-text: -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;

  --type-display: 34px;
  --type-title1: 28px;
  --type-title2: 22px;
  --type-headline: 17px;
  --type-body: 15px;
  --type-caption: 13px;
  --type-micro: 11px;
  --type-code: 14px;

  /* — Spacing — */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;
  --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;

  /* — Shadows — */
  --shadow-1: 0 1px 2px rgba(20,20,40,0.06), 0 1px 1px rgba(20,20,40,0.04);
  --shadow-2: 0 2px 4px rgba(20,20,40,0.06), 0 6px 16px rgba(20,20,40,0.06);
  --shadow-3: 0 4px 10px rgba(20,20,40,0.08), 0 12px 32px rgba(20,20,40,0.08);
  --shadow-pop: 0 8px 24px rgba(255,107,53,0.32);
  --shadow-glow-green: 0 0 0 4px rgba(34,197,94,0.16);
  --shadow-glow-red:   0 0 0 4px rgba(239,68,68,0.16);

  /* — World colors (17, 4 groups) — */
  --w1:  #FF6B35; /* Swift Basics      foundations */
  --w2:  #FFB627; /* Optionals          foundations */
  --w3:  #F25F5C; /* Strings & Chars    foundations */
  --w4:  #4ECDC4; /* Collections        types */
  --w5:  #06D6A0; /* Structs            types */
  --w6:  #14B8A6; /* Enums              types */
  --w7:  #118AB2; /* Functions/Closures paradigms */
  --w8:  #3B82F6; /* Classes & OOP      paradigms */
  --w9:  #6366F1; /* Protocols          paradigms */
  --w10: #8B5CF6; /* Generics           paradigms */
  --w11: #A855F7; /* Error Handling     advanced */
  --w12: #EC4899; /* Memory & ARC       advanced */
  --w13: #DC2EAA; /* Concurrency        advanced */
  --w14: #F472B6; /* SwiftUI            advanced */
  --w15: #84CC16; /* Combine            advanced */
  --w16: #EAB308; /* Testing            advanced */
  --w17: #F97316; /* Performance        advanced */
}

[data-theme="dark"] {
  --canvas: #0B0F1A;
  --canvas-soft: #131826;
  --elevated: #141B2D;
  --elevated-2: #1B2238;
  --hairline: rgba(84,84,88,0.45);
  --hairline-strong: rgba(120,120,128,0.55);
  --scrim: rgba(0,0,0,0.4);

  --ink: #F4F6FB;
  --ink-2: rgba(235,235,245,0.85);
  --ink-3: rgba(235,235,245,0.55);
  --ink-4: rgba(235,235,245,0.3);

  --glass-bg: rgba(28,32,48,0.55);
  --glass-tint: rgba(60,66,90,0.5);
  --glass-stroke: rgba(255,255,255,0.08);
  --glass-shine: rgba(255,255,255,0.16);

  --brand-primary-tint: rgba(255,107,53,0.16);
  --brand-secondary-tint: rgba(78,205,196,0.16);
  --success-tint: rgba(34,197,94,0.16);
  --warning-tint: rgba(245,158,11,0.16);
  --danger-tint:  rgba(239,68,68,0.16);

  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 2px 4px rgba(0,0,0,0.32), 0 6px 16px rgba(0,0,0,0.28);
  --shadow-3: 0 4px 10px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.34);
  --shadow-pop: 0 8px 28px rgba(255,107,53,0.38);
}

/* ─── Resets ─────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-text);
  background: var(--canvas);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Type classes ─────────────────────────────────── */
.t-display  { font-family: var(--font-rounded); font-size: 34px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.05; }
.t-title1   { font-family: var(--font-rounded); font-size: 28px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.1; }
.t-title2   { font-family: var(--font-rounded); font-size: 22px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.15; }
.t-headline { font-family: var(--font-rounded); font-size: 17px; font-weight: 600; letter-spacing: -0.2px; }
.t-body     { font-family: var(--font-text);    font-size: 15px; font-weight: 400; line-height: 1.45; }
.t-body-em  { font-family: var(--font-text);    font-size: 15px; font-weight: 600; }
.t-caption  { font-family: var(--font-text);    font-size: 13px; font-weight: 500; color: var(--ink-3); }
.t-micro    { font-family: var(--font-text);    font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink-3); }
.t-mono     { font-family: var(--font-mono);    font-size: 14px; }
.t-num      { font-family: var(--font-rounded); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ─── Utility ─────────────────────────────────── */
.ds-grid { display: grid; gap: 16px; }
.ds-row  { display: flex; gap: 12px; align-items: center; }
.hairline { background: var(--hairline); }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { scrollbar-width: none; }