/* ═══════════════════════════════════════════════════════════════════════════ Prism Design Tokens — tokens.css · "Prism Ink / Graphite" Single source of truth. Edit here to restyle the entire extension. style.css references only var(--token) — no raw values anywhere. System (final, 2026-06-11): neutral ink surfaces · NO accent hue — white ink is the action color · color only ever means STATE (green/amber/red) · NO gradients on UI (brand dispersion is expressed through motion). ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ─── Surfaces ────────────────────────────────────────────────────────── */ --bg: #1E1E1E; /* panel floor — matches AE 2026 dark UI */ --bg-surface: #262628; /* buttons, raised elements */ --bg-card: #2E2E30; /* cards, elevated sections */ --bg-input: #161618; /* input wells, code blocks */ --bg-hover: #303032; /* hover targets */ --bg-active: #383838; /* pressed / selected */ --bg-overlay: rgba(22,22,24,0.97); /* toast backdrop */ /* ─── Text ────────────────────────────────────────────────────────────── */ --text-primary: #F2F2F7; --text-body: rgba(242,242,247,0.58); --text-tertiary: rgba(242,242,247,0.44); --text-caption: rgba(242,242,247,0.32); --text-disabled: rgba(242,242,247,0.18); --white: #ffffff; --black: #0a0a0c; /* ─── Borders ─────────────────────────────────────────────────────────── */ --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14); --border-hover: rgba(255,255,255,0.22); --border-focus: rgba(255,255,255,0.28); --divider: rgba(255,255,255,0.05); /* ─── Hover tints ─────────────────────────────────────────────────────── */ --hover-subtle: rgba(255,255,255,0.04); --hover-normal: rgba(255,255,255,0.06); /* ─── Scrollbar ───────────────────────────────────────────────────────── */ --scrollbar-thumb: rgba(255,255,255,0.12); --scrollbar-thumb-hover: rgba(255,255,255,0.22); /* ─── Accent ── GRAPHITE: white ink is the action color ─────────────────── No hue. Filled CTAs are near-white with near-black text; copy moments and links are full-brightness white; toggles-on are ink with an inverted dark thumb. Color in the panel then ONLY ever means state. */ --color-accent: #E9E9EE; --color-accent-tint: rgba(255,255,255,0.08); --color-accent-tint-strong:rgba(255,255,255,0.14); --color-accent-bd: rgba(255,255,255,0.30); --color-accent-hover: rgba(255,255,255,0.12); --color-accent-ring: 0 0 0 1px rgba(255,255,255,0.28); --color-accent-text: #FFFFFF; --color-on-accent: #131316; --toggle-thumb-on: #131316; /* ─── Tab indicator ── own token for independent tuning ──────────────── */ --tab-indicator: rgba(255,255,255,0.72); /* ─── Brand ── DEPRECATED gradient aliases ──────────────────────────────── Prism Ink: NO gradients on any UI surface. The dispersion concept is expressed through MOTION (connect shimmer, website hero), never paint. Aliases kept flat so legacy references can't reintroduce a gradient. */ --g1: var(--color-accent); --g2: var(--color-accent); --grad: linear-gradient(135deg, var(--g1) 0%, var(--g2) 100%); --brand-to-tint: var(--color-accent-tint); /* ─── Connection states ─────────────────────────────────────────────────── --ae-blue retained only for btn-accent's connected state; slated for retirement — connection should speak via the status dot alone. */ --ae-blue: #2680EB; --ae-blue-bg: rgba(38,128,235,0.12); --ae-blue-bd: rgba(38,128,235,0.28); --ae-blue-hover: rgba(38,128,235,0.18); --ae-blue-ring: 0 0 0 1px rgba(38,128,235,0.22); --state-idle: #48484A; --state-connecting-bg: rgba(255,159,10,0.07); --state-connecting-bd: rgba(255,159,10,0.30); --state-reconnecting-bd: rgba(255,159,10,0.22); /* ─── Status ──────────────────────────────────────────────────────────── */ --success: #34C759; --warn: #FF9F0A; --error: #FF453A; --success-bg: rgba(52,199,89,0.09); --success-bd: rgba(52,199,89,0.32); --success-hover: rgba(52,199,89,0.15); --warn-bg: rgba(255,159,10,0.09); --warn-bd: rgba(255,159,10,0.30); --error-bg: rgba(255,69,58,0.09); --error-bg-soft: rgba(255,69,58,0.06); --error-bd: rgba(255,69,58,0.38); --error-bd-soft: rgba(255,69,58,0.22); --error-bd-mid: rgba(255,69,58,0.32); --error-hover: rgba(255,69,58,0.15); --error-bd-hover:rgba(255,69,58,0.30); --error-ring: 0 0 0 2px rgba(255,69,58,0.16); /* ─── Tier identity ── a ladder of restraint, not decoration ────────────── Free = plain · Go = ink dot · Pro = ink tint · Max = pure white. Premium reads as LESS color, not more. */ --tier-free-text: var(--text-body); --tier-go-text: var(--text-primary); --tier-go-dot: var(--color-accent); --tier-pro-text: var(--color-accent-text); --tier-pro-bd: var(--color-accent-bd); --tier-max-bg: rgba(255,255,255,0.12); --tier-max-bd: rgba(255,255,255,0.36); --tier-max-card-bd: rgba(255,255,255,0.24); /* legacy "studio" aliases → max (kept so old class names don't break) */ --tier-studio-bg: var(--tier-max-bg); --tier-studio-bd: var(--tier-max-bd); --tier-studio-card-bd:var(--tier-max-card-bd); /* ─── Focus ───────────────────────────────────────────────────────────── */ --focus-ring: 0 0 0 2px rgba(255,255,255,0.05); --focus-ring-visible: rgba(255,255,255,0.35); /* ─── Toggle ──────────────────────────────────────────────────────────── */ --toggle-thumb-off: rgba(235,235,245,0.45); /* ─── Spinner ─────────────────────────────────────────────────────────── */ --spinner-track: rgba(255,255,255,0.22); --spinner-head: #ffffff; /* ─── Radii ── one continuous scale; card=xl, group=lg, control=md ────── */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* ─── Typography — families ───────────────────────────────────────────── */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "SF Mono", "Fira Code", "Cascadia Code", "Courier New", monospace; /* ─── Typography — sizes (9px caption floor; no sub-legible sizes) ────── */ --font-size-xs: 9px; --font-size-sm: 10px; --font-size-md: 11px; --font-size-lg: 12px; --font-size-xl: 14px; /* ─── Typography — weights ────────────────────────────────────────────── */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ─── Typography — tracking ───────────────────────────────────────────── */ --tracking-tight: 0.2px; --tracking-normal: 0.5px; --tracking-wide: 1.0px; --tracking-label: 1.5px; --tracking-caps: 2.0px; /* ─── Typography — leading ────────────────────────────────────────────── */ --leading-tight: 1.4; --leading-snug: 1.45; --leading-normal: 1.5; --leading-loose: 1.55; --leading-relaxed: 1.65; /* ─── Spacing — 4px grid ──────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; /* ─── Elevation ───────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.40); --shadow-md: 0 4px 12px rgba(0,0,0,0.48); --shadow-lg: 0 8px 28px rgba(0,0,0,0.55); --shadow-thumb: 0 1px 3px rgba(0,0,0,0.40); --shadow-thumb-active: 0 1px 3px rgba(0,0,0,0.28); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.05); --shadow-inset-md: inset 0 1px 0 rgba(255,255,255,0.07); --shadow-seg: 0 1px 3px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07); --usage-bg: rgba(0,0,0,0.26); /* nested usage-strip well */ /* ─── Motion — durations ──────────────────────────────────────────────── */ --duration-fast: 120ms; --duration-normal: 180ms; --duration-slow: 300ms; --duration-shake: 380ms; --duration-spin: 600ms; --duration-pulse: 1050ms; --duration-pulse-slow: 1400ms; /* ─── Motion — easing ─────────────────────────────────────────────────── */ --ease-default: ease; --ease-shake: ease-out; --ease-spin: linear; --ease-pulse: ease-in-out; --ease-spring: cubic-bezier(0.32, 0.72, 0, 1); /* Apple decel — view transitions */ /* ─── Motion — shorthand transition helpers ───────────────────────────── */ --t-fast: var(--duration-fast) var(--ease-default); --t-normal: var(--duration-normal) var(--ease-default); --t-slow: var(--duration-slow) var(--ease-default); /* ─── Z-index ─────────────────────────────────────────────────────────── */ --z-base: 1; --z-overlay: 100; --z-toast: 9999; }