/* TRUE VISUAL Design Tokens v1.0
   Single source of truth for spacing, typography, radii and semantic colors. */

:root{
  /* Brand */
  --tv-color-violet:#8B59FB;
  --tv-color-violet-soft:#A98AFF;
  --tv-color-cyan:#52D6FF;
  --tv-color-coral:#FF6F5F;

  /* Surfaces */
  --tv-color-bg:#090C13;
  --tv-color-bg-elevated:#0E1320;
  --tv-color-paper:#F2F1EC;
  --tv-color-paper-alt:#E8E7E1;

  /* Text */
  --tv-color-text-dark:#111318;
  --tv-color-text-light:#F4F6FB;
  --tv-color-muted-dark:#616977;
  --tv-color-muted-light:#98A1B1;

  /* Lines */
  --tv-divider-light:rgba(17,19,24,.16);
  --tv-divider-dark:rgba(255,255,255,.16);
  --tv-border-light:rgba(17,19,24,.10);
  --tv-border-dark:rgba(255,255,255,.10);

  /* Layout */
  --tv-container:min(1480px,calc(100vw - 64px));
  --tv-section-space:120px;
  --tv-grid-label:clamp(96px,8vw,190px);
  --tv-grid-side:clamp(280px,22vw,440px);
  --tv-grid-gap:clamp(26px,3vw,58px);

  /* Spacing scale */
  --tv-space-1:8px;
  --tv-space-2:12px;
  --tv-space-3:16px;
  --tv-space-4:24px;
  --tv-space-5:32px;
  --tv-space-6:40px;
  --tv-space-7:48px;
  --tv-space-8:64px;
  --tv-space-9:80px;
  --tv-space-10:96px;
  --tv-space-11:120px;

  /* Radius */
  --tv-radius-sm:12px;
  --tv-radius-md:18px;
  --tv-radius-lg:28px;
  --tv-radius-xl:36px;
  --tv-radius-pill:999px;

  /* Typography */
  --tv-font-sans:Inter,Arial,Helvetica,sans-serif;
  --tv-type-caption:clamp(11px,.68vw,14px);
  --tv-type-small:14px;
  --tv-type-body:clamp(16px,1vw,20px);
  --tv-type-lead:clamp(19px,1.25vw,24px);
  --tv-type-card-title:clamp(28px,2vw,40px);
  --tv-type-section-title:clamp(52px,min(4vw,7.2vh),88px);
  --tv-type-page-title:clamp(68px,min(5.8vw,9vh),124px);
  --tv-type-display:clamp(76px,min(7vw,11vh),142px);

  --tv-leading-tight:.96;
  --tv-leading-title:1.02;
  --tv-leading-body:1.62;

  --tv-tracking-caption:.14em;
  --tv-tracking-title:-.05em;

  /* Motion */
  --tv-ease:cubic-bezier(.2,.7,.2,1);
  --tv-duration-fast:.2s;
  --tv-duration-base:.32s;

  /* Shadows / glow */
  --tv-shadow-card:0 28px 60px rgba(0,0,0,.22);
  --tv-glow-violet:0 0 24px rgba(139,89,251,.22);
}
@media(max-width:1100px){
  :root{
    --tv-container:min(100% - 40px,1480px);
    --tv-section-space:92px;
  }
}
@media(max-width:700px){
  :root{
    --tv-container:calc(100vw - 34px);
    --tv-section-space:76px;
    --tv-type-section-title:clamp(42px,12vw,58px);
    --tv-type-page-title:clamp(52px,14vw,74px);
  }
}