/* tokens/fonts.css */
/* ============================================================
   Time Sellers — Webfonts
   ------------------------------------------------------------
   SUBSTITUTIONS (no original font files were provided):
   - Figtree      → stand-in for "Google Sans" (display + UI)
   - JetBrains Mono → stand-in for "Google Sans Mono" (spec / code / numerals)
   Nunito (mascot speech, referenced directly in crt-buddies.js) and
   Caveat (low-fi "Sketch" studio mode) are used as-is.
   Replace with licensed originals when available.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500&family=Nunito:wght@600;700;800;900&family=JetBrains+Mono:wght@400;500;700&family=Caveat:wght@500;600;700&display=swap');

/* tokens/colors.css */
/* ============================================================
   Time Sellers — Color tokens
   Dark only (:root). Light palette retired — see tokens/colors-light.css.retired.
   Base palette is theme-independent; semantic aliases flip per theme.
   ============================================================ */
:root {
  /* ---- Brand blue (primary action, from landing CTA #2F6FEE) ---- */
  --blue-300: #8FB0F7;
  --blue-400: #5B8CF2;
  --blue-500: #2F6FEE;   /* primary */
  --blue-600: #2A62D4;   /* hover */
  --blue-700: #2453B4;   /* active */

  /* ---- Azure (logo mark, "Use AI." gradient tail, accent glow) ---- */
  --azure-300: #9AD3F6;
  --azure-400: #5FC0F2;
  --azure-500: #38A8EC;
  --azure-600: #2A90D4;

  /* ---- Mascot accents (from crt-buddies.js — personality layer) ---- */
  --m-indigo: #7C8CF8;   --m-indigo-deep: #5F6EE0;   --m-indigo-soft: #A5B1FF;
  --m-mint:   #5FC9A9;   --m-mint-deep:   #43AD8E;   --m-mint-soft:   #A8E6D2;
  --m-coral:  #F58E77;   --m-coral-deep:  #D96F58;   --m-coral-soft:  #FFC0AE;
  --m-pink:   #EF92C8;   --m-pink-deep:   #D274AA;   --m-pink-soft:   #F7C2E2;
  --m-gold:   #EDB94F;   --m-gold-deep:   #CE9A33;   --m-gold-soft:   #F7DFA8;
  --m-sky:    #74B6EC;   --m-sky-deep:    #4A90CC;   --m-sky-soft:    #BFE0FA;
  --m-screen: #252B3D;   /* CRT screen face */
  --m-eye:    #BFF0FF;   /* CRT eye/mouth glow */
  --m-ink:    #33322D;   /* mascot outline warm-black */
  --m-bezel:  #EDECE5;   /* CRT bezel cream */

  /* ---- Semantic status ---- */
  --green-400: #5FC9A9;  --green-500: #43AD8E;   /* success / money */
  --green-700: #1E7A58;  /* deep green — text on light tints */
  --amber-400: #F7DFA8;  --amber-500: #F2C230;   /* warning / draft */
  --red-400:   #F58E77;  --red-500:   #E0705C;   --red-600: #C4573F; /* danger */

  /* ---- Warm neutral scale (sand) — light surfaces + mascot warmth ---- */
  --sand-50:  #FBFAF7;
  --sand-100: #F2F0EA;
  --sand-200: #EDECE5;
  --sand-300: #DBD8CE;
  --sand-400: #C9C5B8;
  --sand-500: #9A978E;
  --sand-600: #6E6B62;
  --sand-700: #4A4840;
  --sand-800: #33322D;
  --sand-900: #1F1E1A;

  /* ---- Cool near-black scale (ink) — dark surfaces ---- */
  --ink-950: #0A0A0C;
  --ink-900: #101014;
  --ink-850: #16161B;
  --ink-800: #1B1C21;
  --ink-700: #26262C;
  --ink-600: #33343B;
  --ink-500: #4A4B53;

  /* ============ SEMANTIC ALIASES — DARK (default) ============ */
  --bg:            var(--ink-950);
  --bg-subtle:     var(--ink-900);
  --surface:       var(--ink-850);
  --surface-raised:var(--ink-800);
  --surface-hover: var(--ink-700);
  --surface-inset: #000000;

  --border:        rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);
  --border-accent: var(--blue-500);

  --text:          #F6F5F1;
  --text-muted:    #9E9C94;
  --text-subtle:   #6E6C64;
  --text-on-accent:#FFFFFF;

  --accent:        var(--blue-500);
  --accent-hover:  var(--blue-600);
  --accent-active: var(--blue-700);
  --accent-soft:   rgba(47,111,238,0.16);
  --accent-text:   var(--azure-400);   /* links, highlighted words */
  --focus-ring:    rgba(56,168,236,0.55);

  --money:         var(--green-400);

  /* ---- Scrollbars (barely-there on dark) ---- */
  --scrollbar-thumb:       rgba(255,255,255,0.10);   /* @kind color */
  --scrollbar-thumb-hover: rgba(255,255,255,0.20);   /* @kind color */
  --gradient-brand:  linear-gradient(92deg, var(--azure-500) 0%, var(--blue-500) 100%);
  --gradient-mark:   linear-gradient(135deg, var(--azure-400) 0%, var(--blue-500) 100%);
  --gradient-useai:  linear-gradient(100deg, #EAF4FF 0%, var(--azure-500) 52%, var(--blue-500) 100%);
  /* ambient page glow used behind the hero on dark */
  --glow-hero: radial-gradient(60% 50% at 50% 0%, rgba(47,111,238,0.14) 0%, rgba(47,111,238,0) 70%);  /* @kind other */
}

/* Re-assert dark under a light ancestor — set data-theme="dark" on :root or ANY element to scope its subtree */
:root[data-theme="dark"],
[data-theme="dark"] {
  --bg: var(--ink-950); --bg-subtle: var(--ink-900);
  --surface: var(--ink-850); --surface-raised: var(--ink-800);
  --surface-hover: var(--ink-700); --surface-inset: #000000;
  --border: rgba(255,255,255,0.09); --border-strong: rgba(255,255,255,0.16);
  --border-accent: var(--blue-500);
  --text: #F6F5F1; --text-muted: #9E9C94; --text-subtle: #6E6C64;
  --text-on-accent: #FFFFFF;
  --accent: var(--blue-500); --accent-hover: var(--blue-600); --accent-active: var(--blue-700);
  --accent-soft: rgba(47,111,238,0.16);
  --accent-text: var(--azure-400); --focus-ring: rgba(56,168,236,0.55);
  --money: var(--green-400);
  --scrollbar-thumb: rgba(255,255,255,0.10);
  --scrollbar-thumb-hover: rgba(255,255,255,0.20);
  --gradient-useai: linear-gradient(100deg, #EAF4FF 0%, var(--azure-500) 52%, var(--blue-500) 100%);
}

/* Light palette retired 2026-08 — preserved in tokens/colors-light.css.retired (not imported). */

/* tokens/typography.css */
/* ============================================================
   Time Sellers — Typography tokens
   Figtree (Google Sans stand-in) carries display + UI.
   Nunito = mascot / playful. JetBrains Mono = spec/numerals.
   Caveat = low-fi "Sketch" studio mode.
   ============================================================ */
:root {
  --font-display: 'Figtree', 'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Figtree', 'Google Sans Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-playful: 'Nunito', 'Figtree', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Google Sans Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-sketch:  'Caveat', 'Comic Sans MS', cursive;

  /* ---- Type scale (px) ---- */
  --fs-display-xl: 64px;   /* hero, ≥desktop */
  --fs-display-l:  48px;
  --fs-display-m:  36px;
  --fs-h1:         28px;
  --fs-h2:         22px;
  --fs-h3:         18px;
  --fs-body-l:     17px;
  --fs-body:       15px;   /* base UI */
  --fs-body-s:     13px;
  --fs-caption:    12px;
  --fs-micro:      11px;
  --fs-eyebrow:    12px;   /* uppercase labels (YOUR ESTIMATE) */

  /* ---- Line heights ---- */
  --lh-tight:   1.05;   /* @kind other */
  --lh-snug:    1.2;    /* @kind other */
  --lh-normal:  1.45;   /* @kind other */
  --lh-relaxed: 1.6;    /* @kind other */

  /* ---- Weights ---- */
  --fw-regular:  400;   /* @kind other */
  --fw-medium:   500;   /* @kind other */
  --fw-semibold: 600;   /* @kind other */
  --fw-bold:     700;   /* @kind other */
  --fw-extrabold:800;   /* @kind other */
  --fw-black:    900;   /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-tight:   -0.02em;   /* @kind other */
  --ls-snug:    -0.01em;   /* @kind other */
  --ls-normal:  0;         /* @kind other */
  --ls-eyebrow:  0.09em;   /* @kind other */
  --ls-wide:     0.04em;   /* @kind other */
}

/* tokens/spacing.css */
/* ============================================================
   Time Sellers — Spacing scale (4px base grid)
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* ---- Semantic spacing ---- */
  --gap-inline:  8px;    /* icon↔label inside a control */
  --gap-chip:    10px;   /* between chips / pills */
  --pad-control: 12px 20px;   /* pill button padding */
  --pad-card:    24px;
  --page-gutter: 32px;
  --content-max: 1200px;
}

/* tokens/effects.css */
/* ============================================================
   Time Sellers — Radius, shadow, blur & motion tokens
   Pills are fully rounded (999). Cards are gently rounded.
   Shadows are soft & warm in light, near-invisible in dark
   where elevation is carried by surface lift + subtle glow.
   ============================================================ */
:root {
  /* ---- Corner radii ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-pill: 999px;
  --radius-card: 16px;

  /* ---- Elevation — DARK default: deep cool ambient depth ---- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 28px rgba(0,0,0,0.55);
  --shadow-lg: 0 20px 56px rgba(0,0,0,0.6);
  --shadow-mascot: 0 4px 18px rgba(0,0,0,0.5);
  /* focused / accent glow (both themes) */
  --glow-accent: 0 0 0 4px var(--focus-ring);
  --glow-cta:    0 8px 28px rgba(47,111,238,0.35);

  /* ---- Blur (glass surfaces: nav, floating pills) ---- */
  --blur-glass: 16px;   /* @kind other */

  /* ---- Motion ---- */
  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   200ms;  /* @kind other */
  --dur-slow:   320ms;  /* @kind other */
  --dur-slower: 500ms;  /* @kind other */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);      /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);   /* @kind other */
}

/* Light shadows retired 2026-08 — preserved in tokens/effects-light.css.retired. */

/* Re-assert dark shadows on a dark subtree under a light ancestor */
:root[data-theme="dark"],
[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 28px rgba(0,0,0,0.55);
  --shadow-lg: 0 20px 56px rgba(0,0,0,0.6);
  --shadow-mascot: 0 4px 18px rgba(0,0,0,0.5);
}

/* tokens/base.css */
/* ============================================================
   Time Sellers — Base layer: resets, document defaults,
   link styling, and a few brand utility classes.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Links — always defined so editor-added links aren't browser-blue */
a:not([class]) { color: var(--accent-text); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:not([class]):hover { color: var(--accent); }

::selection { background: var(--accent-soft); color: var(--text); }

/* ---- Scrollbars — barely visible, thumb-only, no track/arrows ---- */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-pill);
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

:focus-visible { outline: none; box-shadow: var(--glow-accent); border-radius: var(--radius-sm); }

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); margin: 0; }
p { margin: 0; text-wrap: pretty; }

/* ---- Brand utilities ---- */
.ts-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.ts-gradient-text {
  background: var(--gradient-useai);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ts-mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.ts-sketch { font-family: var(--font-sketch); }

/* components/actions/actions.css */
/* ============================================================
   Studio Design — actions (Button)
   Real CSS classes — plain-HTML consumers use these directly:
   <button class="ts-btn ts-btn--primary">Launch</button>
   ============================================================ */
.ts-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gap-inline);
  font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-body-s);
  line-height: 1; letter-spacing: 0; white-space: nowrap;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  padding: 11px 20px; cursor: pointer; user-select: none;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.ts-btn:active { transform: scale(0.97); }
.ts-btn:focus-visible { outline: none; box-shadow: var(--glow-accent); }
.ts-btn[disabled], .ts-btn.is-disabled { opacity: 0.45; pointer-events: none; }

/* primary — the one blue action */
.ts-btn--primary { background: var(--accent); color: var(--text-on-accent); }
.ts-btn--primary:hover { background: var(--accent-hover); box-shadow: var(--glow-cta); }
.ts-btn--primary:active { background: var(--accent-active); }

/* secondary — dark/surface pill with hairline border */
.ts-btn--secondary { background: var(--surface-raised); color: var(--text); border-color: var(--border-strong); }
.ts-btn--secondary:hover { background: var(--surface-hover); border-color: var(--text-subtle); }

/* ghost — transparent, low-emphasis */
.ts-btn--ghost { background: transparent; color: var(--text-muted); }
.ts-btn--ghost:hover { background: var(--surface-hover); color: var(--text); }

/* sizes */
.ts-btn--sm { padding: 7px 14px; font-size: var(--fs-caption); }
.ts-btn--lg { padding: 14px 26px; font-size: var(--fs-body); }

/* components/brand/brand.css */
/* ============================================================
   Time Sellers — brand (Mark, Logo)
   Lockup: CRT Buddy mark + uppercase tracked wordmark.
   ============================================================ */
.ts-logo {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  color: var(--text); line-height: 1;
}
.ts-logo__mark { display: block; flex: none; }
.ts-logo__word {
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.ts-logo--sm { font-size: 13px; gap: 10px; }
.ts-logo--md { font-size: 17px; gap: 12px; }
.ts-logo--lg { font-size: 24px; gap: 16px; }
.ts-logo--stacked { flex-direction: column; }
.ts-logo--stacked.ts-logo--sm { gap: 8px; }
.ts-logo--stacked.ts-logo--md { gap: 10px; }
.ts-logo--stacked.ts-logo--lg { gap: 12px; }

/* components/display/display.css */
/* ============================================================
   Studio Design — display (BalancePill)
   <span class="ts-balance">
     <span class="ts-balance__amount">18.75 USD</span></span>
   Ratified look: borderless display-font text — no pill chrome.
   ============================================================ */
.ts-balance {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0; border: 0; background: transparent;
  font-family: var(--font-display); font-size: 13px;
  font-weight: var(--fw-bold); color: var(--text); line-height: 1; white-space: nowrap;
}
.ts-balance__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--azure-400); flex: none; }

/* styles.css */
/* ============================================================
   Studio Design — global stylesheet entry point.
   Consumers link THIS file. Ordered: fonts → tokens → base layer.
   ============================================================ */
/* ---- Component classes (plain-HTML consumers use these directly) ---- */