/* =====================================================================
   10MB DESIGN SYSTEM — Colors & Type
   ---------------------------------------------------------------------
   The base layer. CSS variables for color, type, radius, shadow, motion.
   Semantic helpers (h1, h2, body, etc.) at the bottom.
   ===================================================================== */

/* ---------- Webfonts -------------------------------------------------- */
/* Plus Jakarta Sans pairs with Tabler Icons (geometric humanist sans
   meets a precise 2px-stroke outline grid). Numbers and time use the
   same family with tabular-nums turned on — no separate mono face. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");

/* =====================================================================
   1. CORE TOKENS
   ===================================================================== */
:root {
  /* ---- Brand: blue gradient (lifted from index.css) ----------------- */
  --tmb-brand-light-from: #00bfff;   /* hsl(191 100% 50%) — cyan       */
  --tmb-brand-light-to:   #009dff;   /* hsl(203 100% 50%) — bright blue */
  --tmb-brand-dark-from:  #003ea0;   /* hsl(216 100% 31%) — deep navy   */
  --tmb-brand-dark-to:    #0a2a73;   /* hsl(218  84% 25%) — darker navy */

  /* Brand gradients (use these directly) */
  --tmb-grad-light: linear-gradient(135deg, var(--tmb-brand-light-from), var(--tmb-brand-light-to));
  --tmb-grad-dark:  linear-gradient(135deg, var(--tmb-brand-dark-from),  var(--tmb-brand-dark-to));

  /* ---- Block colors — one per category in the grid ----------------- */
  --tmb-block-focus:  var(--tmb-brand-light-from);  /* deep work       */
  --tmb-block-work:   var(--tmb-brand-dark-from);   /* shallow work    */
  --tmb-block-break:  #a855f7;                      /* purple — break  */
  --tmb-block-move:   #22c55e;                      /* green — move    */
  --tmb-block-sleep:  #475569;                      /* slate — sleep   */
  --tmb-block-meal:   #f59e0b;                      /* amber — meal    */
  --tmb-block-social: #ec4899;                      /* pink — social   */
  --tmb-block-empty:  #e2e8f0;                      /* unfilled        */

  /* ---- Block palette — 16 hues × 3 shades = 48 swatches --------- */
  /* Users assign categories to any of these. L/M/D suffixes denote
     Light / Mid (default) / Dark. Mid is the canonical swatch. */
  --tmb-palette-cyan-L:    #67e8f9;
  --tmb-palette-cyan:      #00bfff;
  --tmb-palette-cyan-D:    #0284c7;
  --tmb-palette-sky-L:     #7dd3fc;
  --tmb-palette-sky:       #0ea5e9;
  --tmb-palette-sky-D:     #0369a1;
  --tmb-palette-blue-L:    #93c5fd;
  --tmb-palette-blue:      #009dff;
  --tmb-palette-blue-D:    #003ea0;
  --tmb-palette-indigo-L:  #a5b4fc;
  --tmb-palette-indigo:    #6366f1;
  --tmb-palette-indigo-D:  #4338ca;
  --tmb-palette-purple-L:  #d8b4fe;
  --tmb-palette-purple:    #a855f7;
  --tmb-palette-purple-D:  #6d28d9;
  --tmb-palette-pink-L:    #f9a8d4;
  --tmb-palette-pink:      #ec4899;
  --tmb-palette-pink-D:    #be185d;
  --tmb-palette-rose-L:    #fda4af;
  --tmb-palette-rose:      #f43f5e;
  --tmb-palette-rose-D:    #be123c;
  --tmb-palette-red-L:     #fca5a5;
  --tmb-palette-red:       #ef4444;
  --tmb-palette-red-D:     #991b1b;
  --tmb-palette-orange-L:  #fdba74;
  --tmb-palette-orange:    #f97316;
  --tmb-palette-orange-D:  #c2410c;
  --tmb-palette-amber-L:   #fcd34d;
  --tmb-palette-amber:     #f59e0b;
  --tmb-palette-amber-D:   #b45309;
  --tmb-palette-yellow-L:  #fde047;
  --tmb-palette-yellow:    #eab308;
  --tmb-palette-yellow-D:  #a16207;
  --tmb-palette-green-L:   #86efac;
  --tmb-palette-green:     #22c55e;
  --tmb-palette-green-D:   #15803d;
  --tmb-palette-teal-L:    #5eead4;
  --tmb-palette-teal:      #14b8a6;
  --tmb-palette-teal-D:    #0f766e;
  --tmb-palette-brown-L:   #d6b29e;
  --tmb-palette-brown:     #92604a;
  --tmb-palette-brown-D:   #57211c;
  --tmb-palette-stone-L:   #d6d3d1;
  --tmb-palette-stone:     #78716c;
  --tmb-palette-stone-D:   #44403c;
  --tmb-palette-slate-L:   #cbd5e1;
  --tmb-palette-slate:     #475569;
  --tmb-palette-slate-D:   #1e293b;

  /* ---- Neutral scale (slate-tuned, biased cool to harmonize w/ blue) */
  --tmb-neutral-0:   #ffffff;
  --tmb-neutral-50:  #f8fafc;  /* canvas (light)     */
  --tmb-neutral-100: #f1f5f9;  /* secondary surface  */
  --tmb-neutral-200: #e2e8f0;  /* hairline border    */
  --tmb-neutral-300: #cbd5e1;  /* divider            */
  --tmb-neutral-400: #94a3b8;  /* placeholder        */
  --tmb-neutral-500: #64748b;  /* muted text         */
  --tmb-neutral-600: #475569;  /* secondary text     */
  --tmb-neutral-700: #334155;
  --tmb-neutral-800: #1e293b;  /* canvas (dark)      */
  --tmb-neutral-900: #0f172a;  /* primary text       */
  --tmb-neutral-950: #020617;

  /* ---- Semantic colors --------------------------------------------- */
  /* Three roles. NO separate "info" — informational banners use the
     brand blue at a soft tint (see --tmb-info-soft below) so they
     can't be confused with success/warning/danger by hue alone. */
  --tmb-success: #22c55e;
  --tmb-success-soft: #dcfce7;
  --tmb-warning: #f59e0b;
  --tmb-warning-soft: #fef3c7;
  --tmb-danger:  #ef4444;
  --tmb-danger-soft:  #fee2e2;
  /* Informational — use brand blue at a soft tint, never as a CTA */
  --tmb-info-soft:   #dbeafe;
  --tmb-info-fg:     #0369a1;

  /* ---- Surface roles (LIGHT theme) --------------------------------- */
  --tmb-bg:           var(--tmb-neutral-50);
  --tmb-bg-elevated:  var(--tmb-neutral-0);
  --tmb-surface:      var(--tmb-neutral-0);
  --tmb-surface-soft: var(--tmb-neutral-100);
  --tmb-border:       var(--tmb-neutral-200);
  --tmb-border-soft:  rgba(226, 232, 240, 0.6);
  --tmb-divider:      var(--tmb-neutral-200);

  /* Foreground tiers */
  --tmb-fg-1: var(--tmb-neutral-900);  /* primary text / headlines */
  --tmb-fg-2: var(--tmb-neutral-700);  /* body                     */
  --tmb-fg-3: var(--tmb-neutral-500);  /* muted / supporting       */
  --tmb-fg-4: var(--tmb-neutral-400);  /* placeholder              */
  --tmb-fg-on-brand: #ffffff;          /* text atop brand gradient */

  /* ---- Type ---------------------------------------------------------- */
  /* Replacing Gilroy with Plus Jakarta Sans to pair with Tabler Icons.
     Plus Jakarta's geometric humanist forms sit cleanly next to Tabler's
     2px-stroke, grid-aligned outline icons; tabular figures land in the
     same family. */
  --tmb-font-sans:    "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tmb-font-display: "Plus Jakarta Sans", system-ui, sans-serif; /* same family, used at 700/800 */
  --tmb-font-mono:    "Plus Jakarta Sans", system-ui, sans-serif; /* same family — use .tmb-time for tabular nums */

  /* Weights — we use 4 deliberately */
  --tmb-w-light:    300;  /* almost never; large display only */
  --tmb-w-regular:  400;  /* body                             */
  --tmb-w-medium:   500;  /* emphasized body, labels          */
  --tmb-w-semibold: 600;  /* buttons, small caps, nav         */
  --tmb-w-bold:     700;  /* h2/h3                            */
  --tmb-w-black:    800;  /* h1, hero display                 */

  /* Type scale — modular, 1.25 ratio with a hero jump */
  --tmb-fs-xs:      12px;
  --tmb-fs-sm:      14px;
  --tmb-fs-base:    16px;
  --tmb-fs-lg:      18px;
  --tmb-fs-xl:      20px;
  --tmb-fs-2xl:     24px;
  --tmb-fs-3xl:     30px;
  --tmb-fs-4xl:     36px;
  --tmb-fs-5xl:     48px;
  --tmb-fs-6xl:     60px;
  --tmb-fs-hero:    84px;  /* landing page only */

  --tmb-lh-tight:   1.05;
  --tmb-lh-snug:    1.2;
  --tmb-lh-normal:  1.5;
  --tmb-lh-relaxed: 1.65;

  --tmb-tracking-tight:  -0.025em;  /* large display */
  --tmb-tracking-normal:  0;
  --tmb-tracking-wide:    0.025em;
  --tmb-tracking-widest:  0.18em;   /* uppercase eyebrow labels */

  /* ---- Radius — generous, deliberately soft ------------------------- */
  /* Base is 16px (1rem). The brand is "very rounded".  */
  --tmb-radius-xs:   6px;   /* badges                          */
  --tmb-radius-sm:   10px;  /* chips, small controls           */
  --tmb-radius-md:   14px;  /* inputs                          */
  --tmb-radius-lg:   16px;  /* buttons, default                */
  --tmb-radius-xl:   20px;  /* nav pill, modals                */
  --tmb-radius-block: 22px; /* CANON · all block renderings    */
  --tmb-radius-2xl:  28px;  /* feature cards                   */
  --tmb-radius-3xl:  40px;  /* hero cards, marketing cards     */
  --tmb-radius-pill: 9999px;

  /* ---- Shadow — soft, lifted, with blue tint where it matters ------- */
  --tmb-shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.05);
  --tmb-shadow-sm:   0 2px 8px rgba(15, 23, 42, 0.06);
  --tmb-shadow-md:   0 8px 24px rgba(15, 23, 42, 0.08);
  --tmb-shadow-lg:   0 16px 40px rgba(15, 23, 42, 0.10);
  --tmb-shadow-xl:   0 24px 60px rgba(15, 23, 42, 0.12);
  --tmb-shadow-2xl:  0 32px 80px rgba(15, 23, 42, 0.18);
  --tmb-shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.04);

  /* Glow shadows tinted with brand light — under interactive surfaces */
  --tmb-glow-brand:  0 12px 32px -8px rgba(0, 159, 255, 0.45);
  --tmb-glow-brand-sm: 0 6px 18px -4px rgba(0, 159, 255, 0.35);
  --tmb-glow-purple: 0 12px 32px -8px rgba(168, 85, 247, 0.45);

  /* ---- Spacing — 4px base ------------------------------------------- */
  --tmb-space-1:  4px;
  --tmb-space-2:  8px;
  --tmb-space-3:  12px;
  --tmb-space-4:  16px;
  --tmb-space-5:  20px;
  --tmb-space-6:  24px;
  --tmb-space-8:  32px;
  --tmb-space-10: 40px;
  --tmb-space-12: 48px;
  --tmb-space-16: 64px;
  --tmb-space-20: 80px;
  --tmb-space-24: 96px;

  /* ---- Motion — quick, spring-y when interactive ------------------- */
  --tmb-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);          /* default UI */
  --tmb-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);      /* playful pop */
  --tmb-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --tmb-dur-instant: 100ms;
  --tmb-dur-fast:    180ms;
  --tmb-dur-base:    260ms;
  --tmb-dur-slow:    420ms;
  --tmb-dur-page:    600ms;

  /* ---- Block grid sizing ------------------------------------------- */
  --tmb-block-size: 44px;       /* one 10-min block, touch-safe */
  --tmb-block-gap:  8px;
  --tmb-block-radius: var(--tmb-radius-block);
}

/* ---- Dark theme overrides ------------------------------------------- */
.tmb-dark, [data-theme="dark"] {
  --tmb-bg:           var(--tmb-neutral-900);
  --tmb-bg-elevated:  #0c1322;
  --tmb-surface:      #0c1322;
  --tmb-surface-soft: var(--tmb-neutral-800);
  --tmb-border:       rgba(255, 255, 255, 0.08);
  --tmb-border-soft:  rgba(255, 255, 255, 0.04);
  --tmb-divider:      rgba(255, 255, 255, 0.06);

  --tmb-fg-1: var(--tmb-neutral-50);
  --tmb-fg-2: var(--tmb-neutral-200);
  --tmb-fg-3: var(--tmb-neutral-400);
  --tmb-fg-4: var(--tmb-neutral-500);

  --tmb-block-empty: rgba(255, 255, 255, 0.06);

  --tmb-shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.4);
  --tmb-shadow-md:  0 8px 24px rgba(0, 0, 0, 0.5);
  --tmb-shadow-lg:  0 16px 40px rgba(0, 0, 0, 0.6);
  --tmb-shadow-xl:  0 24px 60px rgba(0, 0, 0, 0.7);
}

/* =====================================================================
   2. SEMANTIC HELPERS — apply directly to elements
   ===================================================================== */
.tmb-body {
  font-family: var(--tmb-font-sans);
  font-size: var(--tmb-fs-base);
  font-weight: var(--tmb-w-regular);
  line-height: var(--tmb-lh-relaxed);
  color: var(--tmb-fg-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11", "tnum"; /* tabular nums when relevant */
}

.tmb-h1, h1.tmb {
  font-family: var(--tmb-font-display);
  font-size: clamp(40px, 7vw, var(--tmb-fs-hero));
  font-weight: var(--tmb-w-black);
  line-height: var(--tmb-lh-tight);
  letter-spacing: var(--tmb-tracking-tight);
  color: var(--tmb-fg-1);
  text-wrap: balance;
}

.tmb-h2, h2.tmb {
  font-family: var(--tmb-font-display);
  font-size: clamp(28px, 4vw, var(--tmb-fs-5xl));
  font-weight: var(--tmb-w-bold);
  line-height: var(--tmb-lh-snug);
  letter-spacing: var(--tmb-tracking-tight);
  color: var(--tmb-fg-1);
  text-wrap: balance;
}

.tmb-h3, h3.tmb {
  font-family: var(--tmb-font-display);
  font-size: var(--tmb-fs-2xl);
  font-weight: var(--tmb-w-bold);
  line-height: var(--tmb-lh-snug);
  color: var(--tmb-fg-1);
}

.tmb-h4, h4.tmb {
  font-family: var(--tmb-font-sans);
  font-size: var(--tmb-fs-lg);
  font-weight: var(--tmb-w-bold);
  line-height: var(--tmb-lh-snug);
  color: var(--tmb-fg-1);
}

.tmb-p, p.tmb {
  font-family: var(--tmb-font-sans);
  font-size: var(--tmb-fs-base);
  font-weight: var(--tmb-w-regular);
  line-height: var(--tmb-lh-relaxed);
  color: var(--tmb-fg-2);
}

.tmb-lead {
  font-family: var(--tmb-font-sans);
  font-size: var(--tmb-fs-xl);
  font-weight: var(--tmb-w-regular);
  line-height: var(--tmb-lh-relaxed);
  color: var(--tmb-fg-3);
}

/* Eyebrow — the small uppercase label seen everywhere in 10MB */
.tmb-eyebrow {
  font-family: var(--tmb-font-sans);
  font-size: var(--tmb-fs-xs);
  font-weight: var(--tmb-w-bold);
  text-transform: uppercase;
  letter-spacing: var(--tmb-tracking-widest);
  color: var(--tmb-fg-3);
}

.tmb-caption {
  font-family: var(--tmb-font-sans);
  font-size: var(--tmb-fs-sm);
  font-weight: var(--tmb-w-regular);
  color: var(--tmb-fg-3);
}

.tmb-time {
  font-family: var(--tmb-font-sans);
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums lining-nums;
}

/* Gradient text helper — appears in hero headlines */
.tmb-grad-text {
  background: var(--tmb-grad-light);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Inputs */
.tmb-input-wrap {
  position: relative;
  padding-bottom: 2px;
  display: block;
}
.tmb-input-wrap > svg.tmb-input-icon {
  position: absolute;
  left: 0;
  top: 10px;
  width: 16px;
  height: 16px;
  color: var(--tmb-fg-3);
  pointer-events: none;
  transition: color 0.2s var(--tmb-ease-out);
}
.tmb-input-wrap > .tmb-input-glow {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--tmb-grad-light);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--tmb-ease-out);
  pointer-events: none;
}
.tmb-input-wrap:focus-within > svg.tmb-input-icon { color: var(--tmb-brand-light-to); }
.tmb-input-wrap:focus-within > .tmb-input-glow { transform: scaleX(1); }

input.tmb-input, textarea.tmb-input {
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--tmb-border);
  border-radius: 0;
  padding: 0 0 0 28px;
  font-family: var(--tmb-font-sans);
  font-size: 16px;
  color: var(--tmb-fg-1);
  outline: none;
  transition: border-color 0.2s var(--tmb-ease-out);
}
input.tmb-input.no-icon, textarea.tmb-input.no-icon { padding-left: 0; }
input.tmb-input::placeholder, textarea.tmb-input::placeholder { color: var(--tmb-fg-4); }
input.tmb-input:focus, textarea.tmb-input:focus { border-bottom-color: transparent; } /* glow takes over */
textarea.tmb-input { height: auto; min-height: 60px; resize: vertical; padding-top: 8px; }

/* Code */
.tmb-code, code.tmb {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  font-size: 0.92em;
  background: var(--tmb-surface-soft);
  color: var(--tmb-fg-1);
  padding: 2px 6px;
  border-radius: var(--tmb-radius-xs);
}

/* Selection — matches landing page */
::selection {
  background: var(--tmb-brand-light-from);
  color: #fff;
}