/* Scoped copy of design-system/tokens.css for the TokenHub web workspace. */
/* ==========================================================================
   TokenHub Design Tokens v1.0  ·  feat/design
   Single workspace · English-first · light + dark
   Brand source: brand/00-README.md (ink #111114 · red #C8102E · light #F6F6F9)
   Usage: <html data-theme="light|dark">  (no attribute = follow OS)
   ========================================================================== */

html.th-workspace {
  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system,
               "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", "SF Mono", Consolas, monospace;

  --text-xs: 12px;   --lh-xs: 16px;   /* meta, badges, timestamps     */
  --text-sm: 13px;   --lh-sm: 20px;   /* sidebar items, buttons, help  */
  --text-md: 15px;   --lh-md: 24px;   /* message body, composer input  */
  --text-lg: 17px;   --lh-lg: 26px;   /* panel titles                  */
  --text-xl: 22px;   --lh-xl: 30px;   /* page titles                   */
  --text-2xl: 30px;  --lh-2xl: 38px;  /* empty-state greeting          */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --tracking-tight: -0.011em;
  --tracking-display: -0.022em;

  /* ---- Spacing (4px base) --------------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Radius ---------------------------------------------------------- */
  --radius-xs: 4px;    /* badges, kbd           */
  --radius-sm: 8px;    /* buttons, list items   */
  --radius-md: 12px;   /* cards, menus          */
  --radius-lg: 20px;   /* composer              */
  --radius-full: 999px;

  /* ---- Layout ---------------------------------------------------------- */
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 60px;
  --panel-w: 360px;           /* advanced panel (right drawer) */
  --thread-max: 760px;        /* reading width for messages    */
  --composer-max: 800px;
  --topbar-h: 52px;
  --hit: 36px;                /* min interactive height (desktop) */
  --hit-touch: 44px;          /* min on touch                    */

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 260ms;

  /* ---- Z-index --------------------------------------------------------- */
  --z-sidebar: 10;
  --z-panel: 20;
  --z-menu: 40;
  --z-dropzone: 50;
  --z-toast: 60;

  /* ---- Brand (theme-independent) -------------------------------------- */
  --brand-red: #C8102E;
  --brand-ink: #111114;
}

/* ---- Light theme (default) -------------------------------------------- */
html.th-workspace, html.th-workspace[data-theme="light"] {
  color-scheme: light;

  --bg:            #FFFFFF;   /* main canvas             */
  --bg-subtle:     #F6F6F9;   /* sidebar, brand light    */
  --bg-muted:      #EEEEF2;   /* hover, chips            */
  --bg-inset:      #F6F6F9;   /* code, quoted blocks     */
  --surface:       #FFFFFF;   /* cards, menus, composer  */
  --surface-raised:#FFFFFF;

  --fg:            #111114;   /* primary text = brand ink */
  --fg-muted:      #55555E;   /* secondary text (7.4:1)   */
  --fg-subtle:     #8A8A94;   /* placeholder, meta (3.5:1, non-essential only) */
  --fg-on-accent:  #FFFFFF;

  --border:        #E4E4EA;
  --border-strong: #CFCFD7;
  --focus-ring:    rgba(200, 16, 46, .28);

  --accent:        #C8102E;   /* primary action = brand red, used sparingly */
  --accent-hover:  #A80D26;
  --accent-soft:   #FCEBEE;
  --accent-fg:     #A80D26;   /* red text on white (6.0:1) */

  --primary-btn-bg:   #111114; /* default primary button is ink, not red */
  --primary-btn-fg:   #FFFFFF;
  --primary-btn-hover:#2A2A30;

  --success: #0F7B4F;  --success-soft: #E7F5EE;
  --warning: #A15C00;  --warning-soft: #FDF3E3;
  --danger:  #C8102E;  --danger-soft:  #FCEBEE;
  --info:    #2457C5;  --info-soft:    #EAF0FC;

  --shadow-sm: 0 1px 2px rgba(17,17,20,.06);
  --shadow-md: 0 2px 6px rgba(17,17,20,.05), 0 8px 24px rgba(17,17,20,.07);
  --shadow-lg: 0 12px 40px rgba(17,17,20,.14);
  --shadow-composer: 0 1px 2px rgba(17,17,20,.04), 0 6px 24px rgba(17,17,20,.06);

  --scrim: rgba(17,17,20,.32);
  --dropzone-bg: rgba(200,16,46,.04);
}

/* ---- Dark theme --------------------------------------------------------- */
html.th-workspace[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #111114;
  --bg-subtle:     #17171B;
  --bg-muted:      #232329;
  --bg-inset:      #1B1B20;
  --surface:       #1B1B20;
  --surface-raised:#232329;

  --fg:            #F3F3F6;
  --fg-muted:      #A9A9B3;
  --fg-subtle:     #74747E;
  --fg-on-accent:  #FFFFFF;

  --border:        #2A2A31;
  --border-strong: #3A3A43;
  --focus-ring:    rgba(255, 94, 115, .40);

  --accent:        #E5263F;
  --accent-hover:  #F2455B;
  --accent-soft:   rgba(229,38,63,.14);
  --accent-fg:     #FF7A8C;

  --primary-btn-bg:   #F3F3F6;
  --primary-btn-fg:   #111114;
  --primary-btn-hover:#FFFFFF;

  --success: #3DD68C;  --success-soft: rgba(61,214,140,.12);
  --warning: #F5B54A;  --warning-soft: rgba(245,181,74,.12);
  --danger:  #FF6B7F;  --danger-soft:  rgba(255,107,127,.12);
  --info:    #7AA2FF;  --info-soft:    rgba(122,162,255,.12);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.6);
  --shadow-composer: 0 0 0 1px rgba(255,255,255,.02), 0 8px 28px rgba(0,0,0,.45);

  --scrim: rgba(0,0,0,.55);
  --dropzone-bg: rgba(229,38,63,.08);
}

@media (prefers-color-scheme: dark) {
  html.th-workspace:not([data-theme]) {
    color-scheme: dark;
    --bg:#111114; --bg-subtle:#17171B; --bg-muted:#232329; --bg-inset:#1B1B20;
    --surface:#1B1B20; --surface-raised:#232329;
    --fg:#F3F3F6; --fg-muted:#A9A9B3; --fg-subtle:#74747E; --fg-on-accent:#FFFFFF;
    --border:#2A2A31; --border-strong:#3A3A43; --focus-ring:rgba(255,94,115,.40);
    --accent:#E5263F; --accent-hover:#F2455B; --accent-soft:rgba(229,38,63,.14); --accent-fg:#FF7A8C;
    --primary-btn-bg:#F3F3F6; --primary-btn-fg:#111114; --primary-btn-hover:#FFFFFF;
    --success:#3DD68C; --success-soft:rgba(61,214,140,.12);
    --warning:#F5B54A; --warning-soft:rgba(245,181,74,.12);
    --danger:#FF6B7F; --danger-soft:rgba(255,107,127,.12);
    --info:#7AA2FF; --info-soft:rgba(122,162,255,.12);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 8px 24px rgba(0,0,0,.45);
    --shadow-lg:0 16px 48px rgba(0,0,0,.6);
    --shadow-composer:0 0 0 1px rgba(255,255,255,.02),0 8px 28px rgba(0,0,0,.45);
    --scrim:rgba(0,0,0,.55); --dropzone-bg:rgba(229,38,63,.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.th-workspace { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}