/* ===================================================================== TriQ — DESIGN TOKENS · "BLOOM" One file, one soul. Both rooms (My Space + The Desk) read from here. --------------------------------------------------------------------- Version 1.1 — reconciled. v1.0 (ramps, semantic API, component tokens, migration map) stands as written. This revision adds only what was missing: gradients, room scoping, the sealed mirror, layout widths, the tenant layer, and a base reset. Nothing from v1.0 was renamed. --------------------------------------------------------------------- RULES 1. No component may use a raw hex value. Tokens only. 2. Semantic tokens (Layer 2) are the API. Primitives (Layer 1) are private — components should reference --surface-*, --text-*, --accent-*, never --violet-500 directly. 3. The four meanings: BLOOM (violet/peach) = living, identity, primary action MARIGOLD = opportunity & life-pride (doors, Life milestones, pending/attention states) MINT = growth & work-pride (success, progress, work milestones, positive states) INK = private reflection (the mirror only) 4. The Desk uses the same tokens at lower volume: no gradients, no glow shadows, --shadow-sm max, --radius-md max. ===================================================================== */ :root { /* ============ LAYER 1 · PRIMITIVES (private) ============ */ /* Violet ramp — Bloom primary */ --violet-50: #F7F4FF; --violet-100: #EFEAFF; --violet-200: #E2DAFB; --violet-300: #C9BFEA; --violet-400: #9C8FE6; --violet-500: #7C6FDE; --violet-600: #5A4BC4; --violet-700: #47399F; --violet-800: #362B78; --violet-900: #241D4E; /* Peach ramp — Bloom warmth */ --peach-50: #FFF7F0; --peach-100: #FFEFE6; --peach-200: #FFD9C9; --peach-300: #FFB39B; --peach-400: #FF9678; --peach-500: #FF7A59; --peach-600: #F26746; --peach-700: #D14E30; /* Mint ramp — growth */ --mint-50: #EFF8F5; --mint-100: #E4F5F0; --mint-200: #C2E9DF; --mint-300: #8AD6C4; --mint-400: #5CC7AF; --mint-500: #3BB89E; --mint-600: #2E9A84; --mint-700: #23795F; /* Marigold ramp — opportunity & life */ --marigold-50: #FFF9EC; --marigold-100: #FFF3DA; --marigold-200: #FFE9C2; --marigold-300: #FFD98E; --marigold-400: #FABE55; --marigold-500: #F5A623; --marigold-600: #E08F0B; --marigold-700: #B37B0E; /* Coral ramp — danger/destructive */ --coral-50: #FFF2F0; --coral-100: #FFE3DF; --coral-500: #E85D4A; --coral-600: #CC4433; --coral-700: #A83526; /* Neutral ramp — mist family (violet-tinted, never pure grey) */ --mist-0: #FFFFFF; --mist-25: #FAF8FF; --mist-50: #F7F4FF; --mist-75: #F4F2FA; --mist-100: #F1EDFC; --mist-200: #E9E4F7; --mist-300: #D8D2EA; --mist-400: #B5AECB; --mist-500: #8B84A8; --mist-600: #6A6388; --mist-700: #4E4869; --mist-800: #3A3554; --mist-900: #2E2A45; /* Paper ramp — the mirror only */ --paper-0: #FFFEF9; --paper-100: #F7F3E8; --paper-line:#EFE9DA; --paper-ink: #3C3428; --paper-mut: #A99C87; --paper-accent: #C25537; /* vermilion margin */ /* ============ LAYER 2 · SEMANTIC (the API) ============ */ /* Surfaces */ --surface-app: var(--mist-50); /* app background */ --surface-app-desk: var(--mist-75); /* Desk background (quieter)*/ --surface-card: var(--mist-0); /* default card */ --surface-raised: var(--mist-25); /* hover / raised */ --surface-sunken: var(--mist-100); /* wells, input bg, tracks */ --surface-mirror: var(--paper-0); /* Reflection portrait ONLY */ /* Text */ --text-primary: var(--mist-800); --text-secondary: var(--mist-500); --text-tertiary: var(--mist-400); --text-inverse: var(--mist-0); --text-brand: var(--violet-600); --text-mirror: var(--paper-ink); --text-mirror-muted: var(--paper-mut); /* Borders */ --border-default: var(--mist-200); --border-strong: var(--mist-300); --border-mirror: var(--paper-line); /* Accents by MEANING (rule 3) */ --accent-primary: var(--violet-500); --accent-primary-strong: var(--violet-600); --accent-primary-soft: var(--violet-100); --accent-warm: var(--peach-500); --accent-warm-strong: var(--peach-600); --accent-warm-soft: var(--peach-100); --accent-growth: var(--mint-500); /* success, progress, work-pride */ --accent-growth-strong: var(--mint-600); --accent-growth-soft: var(--mint-100); --accent-opportunity: var(--marigold-500); /* doors, life-pride, attention */ --accent-opportunity-strong: var(--marigold-600); --accent-opportunity-soft: var(--marigold-100); --accent-danger: var(--coral-500); --accent-danger-strong: var(--coral-600); --accent-danger-soft: var(--coral-100); /* Status (Desk pills, alerts) */ --status-ok-bg: var(--mint-100); --status-ok-fg: var(--mint-600); --status-wait-bg: var(--marigold-100); --status-wait-fg: var(--marigold-700); --status-error-bg: var(--coral-100); --status-error-fg: var(--coral-600); --status-info-bg: var(--violet-100); --status-info-fg: var(--violet-600); /* ============ TYPOGRAPHY ============ */ --font-body: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif; --font-mirror: 'Fraunces', Georgia, serif; /* Reflection portrait only */ --text-xs: 11px; --text-sm: 12.5px; --text-base: 14px; --text-md: 15.5px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 34px; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-heavy: 800; --leading-tight: 1.2; --leading-normal: 1.55; --leading-loose: 1.75; --tracking-caps: .12em; /* eyebrows, labels, pills */ /* ============ SPACE / RADIUS / SHADOW / MOTION ============ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --radius-sm: 8px; /* inputs, pills-inner */ --radius-md: 14px; /* Desk cards, table wrap — DESK MAX */ --radius-lg: 20px; /* My Space cards */ --radius-xl: 26px; /* hero cards */ --radius-full: 999px; /* buttons, chips, pills */ /* Shadows: Desk uses sm only; My Space may use md/lg/glow */ --shadow-sm: 0 6px 18px -10px rgba(58,53,84,.20); --shadow-md: 0 12px 30px -16px rgba(58,53,84,.28); --shadow-lg: 0 20px 48px -20px rgba(58,53,84,.35); --shadow-glow-primary: 0 16px 40px -12px rgba(124,111,222,.55); --shadow-glow-warm: 0 12px 28px -10px rgba(255,122,89,.60); --shadow-glow-growth: 0 10px 24px -10px rgba(59,184,158,.55); --ease-out: cubic-bezier(.22,.9,.3,1); --ease-spring: cubic-bezier(.34,1.4,.44,1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 450ms; --dur-room: 550ms; /* room transitions (flip/slide) */ /* ============ COMPONENT TOKENS (Desk essentials) ============ */ --btn-primary-bg: var(--accent-primary); --btn-primary-bg-hover:var(--accent-primary-strong); --btn-primary-fg: var(--text-inverse); --btn-secondary-bg: var(--surface-sunken); --btn-secondary-fg: var(--text-primary); --btn-danger-bg: var(--accent-danger); --btn-radius: var(--radius-full); --btn-pad: 10px 18px; --input-bg: var(--surface-sunken); --input-bg-focus: var(--mist-0); --input-border-focus: var(--accent-primary); --input-radius: var(--radius-sm); --table-head-bg: var(--mist-75); --table-head-fg: var(--text-secondary); --table-row-hover: var(--mist-25); --table-border: var(--border-default); --modal-overlay: rgba(46,42,69,.45); --modal-bg: var(--surface-card); --modal-radius: var(--radius-lg); --modal-shadow: var(--shadow-lg); --nav-bg: var(--mist-0); --nav-item-fg: var(--text-secondary); --nav-item-active-fg: var(--violet-600); --nav-item-active-bg: var(--violet-100); /* ============ GRADIENTS · Bloom's signature ============ Used across the prototypes (gradient name, streak ring, Journey spine). Named here so they stop being re-typed per file. */ --grad-primary: linear-gradient(135deg, var(--violet-500), var(--violet-600)); --grad-warm: linear-gradient(135deg, var(--peach-500), var(--peach-600)); --grad-growth: linear-gradient(135deg, var(--mint-500), var(--mint-600)); --grad-name: linear-gradient(90deg, var(--violet-500), var(--peach-500)); --grad-spine: linear-gradient(180deg, var(--violet-500), var(--peach-500)); --grad-streak: conic-gradient(from -90deg, var(--peach-500), var(--marigold-500)); /* Ambient room wash. My Space breathes; the Desk does not. */ --wash-space: radial-gradient(420px 320px at 105% -4%, rgba(255,122,89,.20), transparent 55%), radial-gradient(460px 380px at -15% 40%, rgba(124,111,222,.14), transparent 55%), linear-gradient(178deg, var(--mist-25) 0%, var(--mist-50) 60%, var(--mist-100) 100%); /* ============ MEANING ALIASES ============ Rule 3 spelled out for the surfaces that carry it literally. These are aliases of the accent-* API above, not a second system — they exist so a Journey milestone cannot be painted the wrong colour by someone reaching for a ramp. */ --meaning-life: var(--accent-opportunity); /* marigold */ --meaning-life-soft: var(--accent-opportunity-soft); --meaning-work: var(--accent-growth); /* mint */ --meaning-work-soft: var(--accent-growth-soft); --meaning-living: var(--accent-primary); /* violet */ --meaning-private: var(--text-mirror); /* ink */ --accent-landmark: var(--violet-800); /* joining monument, once per life */ /* ============ DISPLAY SIZES (fluid) ============ The numeric scale above is the system. These three are the fluid display sizes the room titles need on a 400px phone. */ --text-display: clamp(28px, 7.6vw, 34px); /* greeting */ --text-title: clamp(25px, 7vw, 30px); /* room titles */ --text-numeral: clamp(64px, 22vw, 120px); /* Journey year */ --tracking-tight: -.02em; /* ============ MOTION additions ============ */ --ease-room: cubic-bezier(.6,.05,.25,1); /* flip / slide-over */ --dur-room-desktop: 300ms; /* §4.5 — subtler crossfade on lg+ */ /* ============ LAYOUT · §4.5 ============ */ --width-reading: 640px; /* My Space centre column */ --width-intimate: 720px; /* My Reflection, max — never widescreen */ --width-work: 1200px; /* Desk content canvas */ --rail-left: 260px; /* My Space identity rail */ --rail-right: 300px; /* My Space "Today at ..." */ --rail-desk: 230px; /* Desk nav */ --stage-story: 420px; /* Wrapped — never stretched */ --touch-min: 44px; /* Room-aware pair. Components read these; LAYER 3 retunes them. */ --radius-card: var(--radius-md); --shadow-card: var(--shadow-sm); --focus-ring: 0 0 0 3px var(--violet-200); } /* ===================================================================== LAYER 3 · ROOMS Same semantic names, retuned per room. A card component is written once and renders correctly in either. Set data-room on the shell. ===================================================================== */ [data-room="space"] { --surface-app: transparent; /* --wash-space paints it */ --radius-card: var(--radius-lg); --shadow-card: var(--shadow-md); } [data-room="desk"] { --surface-app: var(--surface-app-desk); --radius-card: var(--radius-md); /* DESK MAX — rule 4 */ --shadow-card: var(--shadow-sm); /* DESK MAX — rule 4 */ } /* --- The mirror. The only paper/ink surface in the product. Scoped so it cannot leak into My Space by accident. Fraunces lives here and in Journey numerals — nowhere else. --------------------------------- */ [data-surface="mirror"] { --surface-card: var(--surface-mirror); --surface-sunken: var(--paper-100); --text-primary: var(--text-mirror); --text-secondary: var(--text-mirror-muted); --border-default: var(--border-mirror); --accent-primary: var(--paper-accent); /* vermilion margin */ --shadow-card: var(--shadow-sm); font-family: var(--font-mirror); } [data-surface="chapter"] { font-family: var(--font-mirror); } /* Journey year numerals */ /* ===================================================================== LAYER 4 · TENANT TriQ is the product. Every tenant brands their own instance. Cusec is client #1 and gets no special treatment in code — the empty block below is the proof of that. ===================================================================== */ :root { --tenant-accent: var(--accent-primary); --tenant-accent-soft: var(--accent-primary-soft); --tenant-avatar-grad: var(--grad-primary); } [data-tenant="cusec"] { /* rides the TriQ default. Overrides land here when a brand is supplied. */ } /* ===================================================================== BASE ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); background: var(--surface-app); -webkit-font-smoothing: antialiased; } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Breakpoints cannot live in custom properties. They live here, and must stay in step with the Tailwind config — same contract, two files. sm <640 the phone experience as built md 640-1024 rails merge above content lg 1024-1440 three-zone My Space; alternating Journey spine xl >1440 as lg, wider gutters only */ /* ===================================================================== MIGRATION MAP · old aubergine theme → Bloom (find → replace across css/theme.css and inline styles) --------------------------------------------------------------------- #3A1E47 / aubergine deep → var(--text-primary) [on light] var(--surface-app-desk) [as bg: NO — dark bg is retired; use light surfaces] #5C2E66 / aubergine mid → var(--accent-primary) #D4A94A / gold → var(--accent-opportunity) #EFD9A0 / gold light → var(--accent-opportunity-soft) #F7F1E6 / cream text → var(--text-primary) on light surfaces green success (various) → var(--status-ok-fg) / --status-ok-bg red/danger (various) → var(--accent-danger) family grey borders (various) → var(--border-default) ===================================================================== */ /* --------------------------------------------------------------------- MIGRATION NOTES (added v1.1) 1. Gold carried more than one meaning in the old theme. The map above sends it to --accent-opportunity, which is right for pending and attention states. Where gold marked a CELEBRATION (anniversary, kudos, a win), send it to --accent-warm instead. Do not resolve this by feel — check what the element was saying. 2. The dark aubergine rail becomes a LIGHT nav with violet active states. Do not build a dark-mode equivalent during migration; that is a separate decision, not a migration step. 3. my-year-at-cusec.html (Wrapped) still runs the retired palette in full. It is concept-proven and visually stale — a rebuild at S6, not a token-by-token recolor. --------------------------------------------------------------------- */