/* ============================================================ CINETHREADS — design tokens (theme.css) ----------------------------------------------------------- SINGLE SOURCE OF TRUTH for the whole suite. Change the ACCENT, the CANVAS, a PANEL shade, or the TITLE scale HERE — in one place — and it ripples across every screen that consumes these tokens. No per-app hexes, no per-page font-token names, no random title sizes. Namespace: every token is `--ct-*` so it never collides with an app's legacy variables while screens are migrated one at a time. As a screen is reskinned, it swaps its old vars for these and stops declaring its own :root palette. ============================================================ */ :root { /* ---------- SURFACES ---------- */ --ct-canvas: #F5F5F7; /* app background */ --ct-surface: #FFFFFF; /* cards / sheets */ --ct-surface-2: #FBFAF7; /* raised panels / sidebar */ --ct-sunken: #EDEFF2; /* inputs / edit-field hover */ /* ---------- TEXT ---------- */ --ct-ink: #182122; /* primary text + all titles (Cinethread dark) */ --ct-ink-2: #6E6E73; /* secondary text */ --ct-ink-3: #86868B; /* tertiary / meta */ --ct-ink-4: #B0B0B5; /* faint / placeholder */ /* ---------- HAIRLINES ---------- */ --ct-line: #E5E5EA; /* dividers, card borders */ --ct-hair: #F0F0F2; /* faint row rules */ /* ---------- ACCENT — Cinethread teal, the one main color throughout ---------- */ --ct-accent: #2f7d75; --ct-accent-hover: #276a63; --ct-accent-tint: #e6f4f1; /* ---------- BRAND — same teal (call-times, logo, key moments); mint for fills ---------- */ --ct-brand: #2f7d75; --ct-brand-fill: #bfe4de; --ct-brand-tint: #e6f4f1; /* ---------- STATUS ---------- */ --ct-green: #1e7a34; --ct-green-tint: #E7F6EC; --ct-red: #b0483c; --ct-red-tint: #FBECEA; --ct-amber: #9A6A1E; --ct-amber-tint: #F6ECD8; /* ---------- CHIPS ---------- */ --ct-chip: #F0F0F2; --ct-chip-txt: #6E6E73; /* ---------- SIDEBAR ---------- */ --ct-side: #FBFAF7; --ct-side-line: #E8E8ED; --ct-side-txt: #6E6E73; --ct-side-ink: #182122; --ct-side-icon: #A0A0A5; /* ---------- TYPE ---------- */ --ct-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --ct-font-brand: 'Jost', var(--ct-font); /* wordmark only */ /* ONE title scale — replaces the 24/26/27/30/32/40/42/60px sprawl. Titles are the ONLY sizes here; big data numerals stay separate. */ --ct-t1: 30px; /* page title / app name → weight 600, -0.022em */ --ct-t2: 20px; /* section title → weight 600, -0.01em */ --ct-t3: 15px; /* card / subsection head → weight 600 */ --ct-eyebrow: 11px; /* the ONE kicker — used sparingly */ --ct-body: 14px; --ct-small: 12.5px; /* big data numerals (call-times, totals) — NOT titles, sized per use. kept as tokens so hero numbers are also consistent where reused. */ --ct-display: 34px; /* ---------- RADIUS ---------- */ --ct-r-sm: 6px; /* chips, inputs, small badges */ --ct-r: 10px; /* buttons, tiles */ --ct-r-lg: 14px; /* cards, dropdowns, modals */ --ct-r-drag: 11px; /* draggable rows (rounding reserved for things you drag to reorder) */ --ct-r-pill: 999px; /* status pills, round chips */ /* ---------- ELEVATION ---------- */ --ct-shadow: 0 1px 2px rgba(0,0,0,.04); --ct-shadow-pop: 0 10px 30px rgba(0,0,0,.14); } /* ============================================================ DARK — same components, retuned tokens. Opt in with (call sheets read outdoors → light default; dark is a toggle). ============================================================ */ :root[data-theme="dark"] { /* Cinethread dark — built around #182122 surfaces + a brighter teal accent */ --ct-canvas:#101718; --ct-surface:#182122; --ct-surface-2:#141c1d; --ct-sunken:#202b2c; --ct-ink:#eaf1f0; --ct-ink-2:#9fb2b0; --ct-ink-3:#7c908e; --ct-ink-4:#5e716f; --ct-line:#2b3739; --ct-hair:#212c2d; --ct-accent:#5fbfae; --ct-accent-hover:#78ccbd; --ct-accent-tint:#16302c; --ct-brand:#5fbfae; --ct-brand-fill:#2f7d75; --ct-brand-tint:#16302c; --ct-green:#5fbf74; --ct-green-tint:#18261B; --ct-red:#e08b7f; --ct-red-tint:#2A1B18; --ct-amber:#d8b25e; --ct-amber-tint:#2A2419; --ct-chip:#24312f; --ct-chip-txt:#c7d3d1; --ct-side:#141c1d; --ct-side-line:#2b3739; --ct-side-txt:#b7c5c3; --ct-side-ink:#eaf1f0; --ct-side-icon:#7c908e; } /* ============================================================ PRIMITIVES — opt-in utility classes (all `ct-` prefixed). Use these instead of re-specifying font-size/weight per app. Standardizes the three things flagged: title sizing, the eyebrow, and number alignment. ============================================================ */ /* ONE page title. Every app's H1 (Productions / Your Scripts / Budgets / Invoicing / Contracts / New trip) uses THIS. */ .ct-title { font-family:var(--ct-font); font-size:var(--ct-t1); font-weight:600; line-height:1.1; letter-spacing:-.022em; color:var(--ct-ink); margin:0; } .ct-section { font-family:var(--ct-font); font-size:var(--ct-t2); font-weight:600; line-height:1.2; letter-spacing:-.01em; color:var(--ct-ink); margin:0; } .ct-cardhead { font-family:var(--ct-font); font-size:var(--ct-t3); font-weight:600; line-height:1.3; color:var(--ct-ink); margin:0; } /* The ONE eyebrow/kicker. Uppercase + spacing lives ONLY here now — not re-invented per app. Use it rarely (label a screen once). */ .ct-eyebrow { font-family:var(--ct-font); font-size:var(--ct-eyebrow); font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--ct-ink-3); } /* Data numerals align in columns without a monospace face. */ .ct-num { font-variant-numeric: tabular-nums; } /* brand-colored text (call-times / key numbers) */ .ct-brandtext{ color: var(--ct-brand); } .ct-link { color: var(--ct-accent); cursor:pointer; } .ct-link:hover{ color: var(--ct-accent-hover); }