/* TurboPrivate visual foundations: the single source of truth for every design
   value. Two tiers live here:
     1. primitives: fonts, scales, palettes, motion; never consumed directly
        by a component for color;
     2. semantic roles: canvas, surface, ink, line, accent, state; the only
        color vocabulary product CSS may use. Each role resolves through
        light-dark(), so one declaration serves both appearances and any
        subtree can pin its own appearance with data-theme.
   Layout thresholds are also fixed here (see "Viewport classes"). */

@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/google-sans-variable.woff2") format("woff2");
}

:root,
:host {
  /* Typography */
  --tp-font-sans: "Google Sans", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --tp-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --tp-text-caption: .6875rem;
  --tp-text-label: .75rem;
  --tp-text-body: .875rem;
  --tp-text-title: 1rem;
  --tp-text-headline: 1.25rem;
  --tp-text-heading: clamp(1.25rem, 1rem + .8cqi, 1.75rem);
  --tp-text-display: clamp(2rem, 1.4rem + 2.4cqi, 3.5rem);
  --tp-leading-tight: 1.2;
  --tp-leading-body: 1.5;
  --tp-leading-reading: 1.65;
  --tp-weight-regular: 400;
  --tp-weight-medium: 500;
  --tp-weight-strong: 650;
  --tp-tracking-tight: -.02em;
  --tp-tracking-caps: .08em;

  /* A four-pixel spatial rhythm. Half steps are reserved for optical alignment. */
  --tp-space-0-5: .125rem;
  --tp-space-1: .25rem;
  --tp-space-1-5: .375rem;
  --tp-space-2: .5rem;
  --tp-space-3: .75rem;
  --tp-space-4: 1rem;
  --tp-space-5: 1.25rem;
  --tp-space-6: 1.5rem;
  --tp-space-8: 2rem;
  --tp-space-10: 2.5rem;
  --tp-space-12: 3rem;
  --tp-space-16: 4rem;
  --tp-sheet-padding: clamp(var(--tp-space-3), 2cqi, var(--tp-space-6));

  /* Geometry and hit areas */
  --tp-radius-xs: .375rem;
  --tp-radius-sm: .625rem;
  --tp-radius-md: .75rem;
  --tp-radius-lg: 1rem;
  --tp-radius-xl: 2rem;
  --tp-control-compact: 2.25rem;
  --tp-control-default: 2.75rem;
  --tp-icon-sm: .875rem;
  --tp-icon-md: 1.125rem;
  --tp-icon-lg: 1.375rem;
  --tp-line-width: 1px;

  /* Layout: one bar, one gutter, one content measure, one sheet measure.
     The bar is one compact row: its controls are the compact size. */
  --tp-bar-size: 2.5rem;
  --tp-gutter: clamp(var(--tp-space-3), 2.5vi, var(--tp-space-8));
  --tp-content-reading: 68ch;
  --tp-content-max: 80rem;
  --tp-sheet-max: 52rem;
  --tp-rail-size: var(--tp-control-default);

  /* Stacking: every layer names its role; no component invents a number.
     Elevation follows the same layers: content is flat, controls carry the
     low shadow, transient surfaces the medium and high ones. A dialog sits
     in the top layer and needs no number. */
  --tp-z-stage: 0;
  --tp-z-sheet: 10;
  --tp-z-controls: 20;
  --tp-z-bar: 30;
  --tp-z-toast: 40;

  /* Viewport classes — the only thresholds product CSS may query:
       compact  < 40rem   (640px)
       medium   40rem … 67.5rem
       wide     ≥ 67.5rem (1080px)
     They match the Agent's Expression layout planner. */

  /* Brand and state primitives: the palette of the public sites, which the
     owner fixed as the product palette on 2026-09-22. State colors are never
     the sole signal. */
  --tp-brand-500: #0870f8;
  --tp-brand-600: #0864d9;
  --tp-brand-soft: #eaf2ff;
  --tp-brand-dark-300: #8dc0ff;
  --tp-brand-dark-400: #5aa2ff;
  --tp-brand-dark-ink: #a9ccff;
  --tp-brand-dark-soft: rgb(8 112 248 / 18%);
  --tp-on-color: #fff;
  --tp-success-light: #15734d;
  --tp-success-dark: #5fcf9c;
  --tp-success-soft-light: rgb(21 115 77 / 10%);
  --tp-success-soft-dark: rgb(95 207 156 / 12%);
  --tp-warning-light: #8a5605;
  --tp-warning-dark: #f0c168;
  --tp-warning-soft-light: rgb(245 185 66 / 18%);
  --tp-warning-soft-dark: rgb(240 193 104 / 14%);
  --tp-danger-light: #b73333;
  --tp-danger-dark: #ff8c8c;
  --tp-danger-soft-light: rgb(183 51 51 / 10%);
  --tp-danger-soft-dark: rgb(255 140 140 / 14%);

  /* Light appearance primitives: warm off-white ground, white panels, warm ink. */
  --tp-light-canvas: #faf9f7;
  --tp-light-canvas-subtle: #f0f4fa;
  --tp-light-surface: #fff;
  --tp-light-surface-raised: #fff;
  --tp-light-surface-muted: #f0f4fa;
  --tp-light-line: rgb(45 35 27 / 12%);
  --tp-light-line-strong: rgb(45 35 27 / 20%);
  --tp-light-ink: #2d231b;
  --tp-light-muted: #514f50;
  --tp-light-faint: #62636a;

  /* Dark appearance primitives: the same warm hue, inverted. */
  --tp-dark-canvas: #14100d;
  --tp-dark-canvas-subtle: #1a1612;
  --tp-dark-surface: #1e1915;
  --tp-dark-surface-raised: #26201a;
  --tp-dark-surface-muted: #2d2620;
  --tp-dark-line: rgb(250 249 247 / 12%);
  --tp-dark-line-strong: rgb(250 249 247 / 22%);
  --tp-dark-ink: #faf9f7;
  --tp-dark-muted: #c7c1b9;
  --tp-dark-faint: #a49d95;

  /* Semantic roles. Components use these and nothing below this line's
     primitives. light-dark() follows the element's color-scheme, which the
     appearance rules at the end of this file set. */
  --tp-canvas: light-dark(var(--tp-light-canvas), var(--tp-dark-canvas));
  --tp-canvas-subtle: light-dark(var(--tp-light-canvas-subtle), var(--tp-dark-canvas-subtle));
  --tp-surface: light-dark(var(--tp-light-surface), var(--tp-dark-surface));
  --tp-surface-raised: light-dark(var(--tp-light-surface-raised), var(--tp-dark-surface-raised));
  --tp-surface-muted: light-dark(var(--tp-light-surface-muted), var(--tp-dark-surface-muted));
  --tp-line: light-dark(var(--tp-light-line), var(--tp-dark-line));
  --tp-line-strong: light-dark(var(--tp-light-line-strong), var(--tp-dark-line-strong));
  --tp-ink: light-dark(var(--tp-light-ink), var(--tp-dark-ink));
  --tp-ink-muted: light-dark(var(--tp-light-muted), var(--tp-dark-muted));
  --tp-ink-faint: light-dark(var(--tp-light-faint), var(--tp-dark-faint));
  --tp-accent: light-dark(var(--tp-brand-500), var(--tp-brand-dark-400));
  --tp-accent-strong: light-dark(var(--tp-brand-600), var(--tp-brand-dark-300));
  --tp-accent-soft: light-dark(var(--tp-brand-soft), var(--tp-brand-dark-soft));
  --tp-accent-ink: light-dark(var(--tp-brand-600), var(--tp-brand-dark-ink));
  /* Text on a filled accent or state surface: dark ink on the lighter dark-mode fills. */
  --tp-on-accent: light-dark(var(--tp-on-color), var(--tp-dark-canvas));
  --tp-success: light-dark(var(--tp-success-light), var(--tp-success-dark));
  --tp-success-soft: light-dark(var(--tp-success-soft-light), var(--tp-success-soft-dark));
  --tp-warning: light-dark(var(--tp-warning-light), var(--tp-warning-dark));
  --tp-warning-soft: light-dark(var(--tp-warning-soft-light), var(--tp-warning-soft-dark));
  --tp-danger: light-dark(var(--tp-danger-light), var(--tp-danger-dark));
  --tp-danger-soft: light-dark(var(--tp-danger-soft-light), var(--tp-danger-soft-dark));
  --tp-glass: color-mix(in srgb, var(--tp-surface-raised) 88%, transparent);
  --tp-scrim: color-mix(in srgb, var(--tp-canvas) 82%, transparent);
  --tp-hover: color-mix(in srgb, var(--tp-ink) 10%, var(--tp-surface-raised));
  --tp-focus-ring: var(--tp-accent);

  /* Elevation is intentionally quiet: depth identifies active control layers. */
  --tp-shadow-low: 0 6px 24px light-dark(rgb(45 35 27 / 3.5%), rgb(0 0 0 / 28%));
  --tp-shadow-medium: 0 16px 44px light-dark(rgb(45 35 27 / 12%), rgb(0 0 0 / 36%));
  --tp-shadow-high: 0 24px 72px light-dark(rgb(45 35 27 / 18%), rgb(0 0 0 / 44%));

  /* Motion communicates continuity, never authority or success. */
  --tp-motion-fast: 120ms;
  --tp-motion-medium: 220ms;
  --tp-motion-ease: cubic-bezier(.2, .8, .2, 1);
  --tp-motion-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* Appearance model: "system" uses the product default (dark), while the
   Account's light/dark choice pins data-theme. color-scheme inherits, so a shadow host declares none of its
   own: the hosted Agent takes the shell's choice, and a standalone Agent
   document pins its own with data-theme on its root. */
:root, [data-theme="system"], [data-theme="dark"] { color-scheme: dark; }

[data-theme="light"] { color-scheme: light; }

/* Fonts by writing system. Google Sans covers Latin, Greek and Cyrillic. An
   element in another script (its lang comes from the words it shows) takes the
   system's font for that script first (Windows, then Apple), then Noto. Han
   characters are drawn differently in Chinese, Japanese and Korean, so each
   has its own list; traditional Chinese comes after Chinese to win over it. */
:lang(he, yi) { font-family: "Google Sans", "Segoe UI", "Arial Hebrew", "Noto Sans Hebrew", sans-serif; }

:lang(ar, fa, ps, sd, ug, ckb) { font-family: "Google Sans", "Segoe UI", "Geeza Pro", "Noto Sans Arabic", sans-serif; }

:lang(ur) { font-family: "Google Sans", "Noto Nastaliq Urdu", "Segoe UI", "Noto Sans Arabic", sans-serif; }

:lang(hi, mr, ne, sa) { font-family: "Google Sans", "Nirmala UI", "Kohinoor Devanagari", "Noto Sans Devanagari", sans-serif; }

:lang(bn, as) { font-family: "Google Sans", "Nirmala UI", "Kohinoor Bangla", "Noto Sans Bengali", sans-serif; }

:lang(gu) { font-family: "Google Sans", "Nirmala UI", "Gujarati Sangam MN", "Noto Sans Gujarati", sans-serif; }

:lang(pa) { font-family: "Google Sans", "Nirmala UI", "Gurmukhi MN", "Noto Sans Gurmukhi", sans-serif; }

:lang(ta) { font-family: "Google Sans", "Nirmala UI", "Tamil Sangam MN", "Noto Sans Tamil", sans-serif; }

:lang(te) { font-family: "Google Sans", "Nirmala UI", "Telugu Sangam MN", "Noto Sans Telugu", sans-serif; }

:lang(kn) { font-family: "Google Sans", "Nirmala UI", "Kannada Sangam MN", "Noto Sans Kannada", sans-serif; }

:lang(ml) { font-family: "Google Sans", "Nirmala UI", "Malayalam Sangam MN", "Noto Sans Malayalam", sans-serif; }

:lang(si) { font-family: "Google Sans", "Nirmala UI", "Sinhala Sangam MN", "Noto Sans Sinhala", sans-serif; }

:lang(th) { font-family: "Google Sans", "Leelawadee UI", "Thonburi", "Noto Sans Thai", sans-serif; }

:lang(lo) { font-family: "Google Sans", "Leelawadee UI", "Lao Sangam MN", "Noto Sans Lao", sans-serif; }

:lang(km) { font-family: "Google Sans", "Leelawadee UI", "Khmer Sangam MN", "Noto Sans Khmer", sans-serif; }

:lang(my) { font-family: "Google Sans", "Myanmar Text", "Myanmar Sangam MN", "Noto Sans Myanmar", sans-serif; }

:lang(ka) { font-family: "Google Sans", "Segoe UI", "Noto Sans Georgian", sans-serif; }

:lang(hy) { font-family: "Google Sans", "Segoe UI", "Noto Sans Armenian", sans-serif; }

:lang(am, ti) { font-family: "Google Sans", "Ebrima", "Kefa", "Noto Sans Ethiopic", sans-serif; }

:lang(zh) { font-family: "Google Sans", "Microsoft YaHei UI", "PingFang SC", "Noto Sans SC", sans-serif; }

:lang(zh-Hant, zh-TW, zh-HK, zh-MO) { font-family: "Google Sans", "Microsoft JhengHei UI", "PingFang TC", "Noto Sans TC", sans-serif; }

:lang(ja) { font-family: "Google Sans", "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", sans-serif; }

:lang(ko) { font-family: "Google Sans", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }