/* tokens.ceremonial.css Layer 3: Ceremonial surface overlay for ora-ops-dashboard. Consumes ora-core Layer 1 (base primitives) and Layer 2 (light semantic) tokens vendored at /tokens/. Defines ops-* tokens that skin the surface for the operator-ceremonial surface tier (Patent 8 territory). No theme switcher: ora-ops boots as ceremonial unconditionally. First-pass L1 derivation landed at Step 3: typography family (--ops-font-family-display/body via --font-display/body), motion curve (--ops-motion-curve via --ease-out), CTA pill radius (--ops-cta-pill-radius via --radius-pill). Remaining DERIVE-LATER candidates (spacing scale, z-layers, color primitives) deferred to a Step 2.5 sweep so this overlay stays narrow during the Brand Authoring v1 build. */ :root { /* === Ceremonial field background (DERIVE-LATER from L1 pastel palette) === Four-corner pastel field, ~18–25% saturation. Composed as four radial overlays so each corner reads as its own tone, blended over a neutral plum base. Confidently coloured, not washed out; anchors the wordmark and gives the orb a richer field to float on. */ --ops-field-bg-stop-tl: #d8c8e8; /* top-left soft lavender */ --ops-field-bg-stop-tr: #c8d8e8; /* top-right pale sky */ --ops-field-bg-stop-bl: #e8dad4; /* bottom-left warm cream */ --ops-field-bg-stop-br: #dac8d4; /* bottom-right cool rose */ --ops-field-bg-base: #d8d0e0; /* neutral mid for blend */ --ops-field-bg: radial-gradient(ellipse 90% 80% at 0% 0%, var(--ops-field-bg-stop-tl) 0%, transparent 65%), radial-gradient(ellipse 90% 80% at 100% 0%, var(--ops-field-bg-stop-tr) 0%, transparent 65%), radial-gradient(ellipse 90% 80% at 0% 100%, var(--ops-field-bg-stop-bl) 0%, transparent 65%), radial-gradient(ellipse 90% 80% at 100% 100%, var(--ops-field-bg-stop-br) 0%, transparent 65%), var(--ops-field-bg-base); /* === Generative card (frosted glass) === Low bg alpha + strong backdrop blur reads as actual frosted glass: the field behind the card stays visible-but-distorted, not covered up by a white plate. */ --ops-card-bg: rgba(255, 255, 255, 0.15); --ops-card-bg-hover: rgba(255, 255, 255, 0.25); --ops-card-bg-active: rgba(255, 255, 255, 0.38); --ops-card-border: rgba(255, 255, 255, 0.45); --ops-card-border-active: rgba(120, 100, 200, 0.45); --ops-card-blur: 36px; --ops-card-saturation: 1.6; --ops-card-radius: 24px; --ops-card-radius-sm: 16px; --ops-card-radius-lg: 32px; --ops-card-padding: 32px; --ops-card-padding-sm: 20px; --ops-card-padding-lg: 48px; --ops-card-gap: 24px; --ops-card-shadow: 0 1px 2px rgba(40, 30, 80, 0.04), 0 8px 24px rgba(40, 30, 80, 0.06), 0 32px 64px rgba(40, 30, 80, 0.08); --ops-card-shadow-hover: 0 2px 4px rgba(40, 30, 80, 0.06), 0 12px 32px rgba(40, 30, 80, 0.08), 0 40px 80px rgba(40, 30, 80, 0.12); /* === CTA pill (large, white, ceremonial) === */ --ops-cta-pill-bg: #ffffff; --ops-cta-pill-bg-hover: #fafaff; --ops-cta-pill-bg-active: #f4f3ff; --ops-cta-pill-fg: #1a1530; --ops-cta-pill-radius: var(--radius-pill); --ops-cta-pill-padding-y: 18px; --ops-cta-pill-padding-x: 36px; --ops-cta-pill-padding-y-lg: 22px; --ops-cta-pill-padding-x-lg: 44px; --ops-cta-pill-font-size: 17px; --ops-cta-pill-font-size-lg: 19px; --ops-cta-pill-font-weight: 500; --ops-cta-pill-letter-spacing: -0.005em; --ops-cta-pill-shadow: 0 2px 4px rgba(40, 30, 80, 0.06), 0 8px 20px rgba(40, 30, 80, 0.10); --ops-cta-pill-shadow-hover: 0 4px 8px rgba(40, 30, 80, 0.08), 0 12px 28px rgba(40, 30, 80, 0.14); /* === Field surfaces (text inputs, drop zones, editable description areas) === */ --ops-field-input-bg: rgba(255, 255, 255, 0.40); --ops-field-input-bg-focus: rgba(255, 255, 255, 0.65); --ops-field-input-border: rgba(255, 255, 255, 0.80); --ops-field-input-border-focus: rgba(120, 100, 200, 0.50); --ops-field-input-radius: 16px; --ops-field-input-padding: 16px 20px; --ops-field-input-font-size: 16px; /* === Brand orb container (orb itself lives in /js/ops-orb.js) === */ --ops-orb-size: 320px; --ops-orb-size-sm: 200px; --ops-orb-size-lg: 480px; --ops-orb-container-bg: transparent; /* === Ceremonial typography (display + body derived from L1; scale and weights remain ceremonial-local) === */ --ops-font-family-display: var(--font-display); --ops-font-family-body: var(--font-body); --ops-font-weight-display: 300; --ops-font-weight-body: 400; --ops-font-weight-emphasis: 500; --ops-font-size-display: 48px; --ops-font-size-title: 32px; --ops-font-size-subtitle: 22px; --ops-font-size-body: 17px; --ops-font-size-small: 14px; --ops-font-size-micro: 12px; --ops-line-height-display: 1.15; --ops-line-height-title: 1.25; --ops-line-height-body: 1.55; --ops-letter-spacing-display: -0.02em; --ops-letter-spacing-title: -0.015em; --ops-letter-spacing-body: -0.005em; /* === Foreground colors (DERIVE-LATER from L1 ink primitives) === Plum-near-black: reads as a deep neutral on the deeper pastel field while staying warmer than pure black (matches the field's plum base). */ --ops-fg-primary: #2a2030; --ops-fg-secondary: rgba(42, 32, 48, 0.70); --ops-fg-tertiary: rgba(42, 32, 48, 0.50); --ops-fg-on-orb: #ffffff; --ops-fg-link: #5a4dd6; --ops-fg-link-hover: #4a3dc6; /* === Motion (curve derived from L1 --ease-out; durations are ceremonial-local) === */ --ops-motion-curve: var(--ease-out); --ops-motion-curve-snap: cubic-bezier(0.32, 0.72, 0, 1); --ops-motion-duration-card: 800ms; --ops-motion-duration-card-fast: 700ms; --ops-motion-duration-card-slow: 1000ms; --ops-motion-duration-micro: 300ms; --ops-motion-duration-micro-fast: 200ms; --ops-motion-duration-micro-slow: 400ms; --ops-motion-duration-orb-state: 800ms; /* === Layout === */ --ops-layout-field-padding: 48px; --ops-layout-field-padding-sm: 24px; --ops-layout-stack-gap: 32px; --ops-layout-stack-gap-sm: 20px; --ops-layout-max-width: 720px; /* Per-step override. Adopted by .ops-stage when a step opts into the wider container via .ba-stage[data-step="polish"] (V4 polish step has dense two-pane content that needs to breathe). Other steps keep the 720px default so the flow does not feel like every card grew. */ --ops-layout-max-width-step-wide: 1280px; /* Tightened from 200px at Step 7.5 polish per visual review (the original spacing existed to clear the reflection echo; reflection was removed at Step 7.5 so the long gap is no longer needed). */ --ops-layout-orb-to-card-gap: 48px; /* === Z layers === */ --ops-z-field: 0; --ops-z-orb: 10; --ops-z-card: 20; --ops-z-card-active: 30; --ops-z-overlay: 100; --ops-z-toast: 200; /* === Logo === */ --ops-logo-height: 36px; --ops-logo-padding: 24px; } /* Honor prefers-reduced-motion: collapse all motion durations to zero. Transitions still fire, just instantly, preserving state-change semantics for screen reader and assistive tech users. */ @media (prefers-reduced-motion: reduce) { :root { --ops-motion-duration-card: 0ms; --ops-motion-duration-card-fast: 0ms; --ops-motion-duration-card-slow: 0ms; --ops-motion-duration-micro: 0ms; --ops-motion-duration-micro-fast: 0ms; --ops-motion-duration-micro-slow: 0ms; --ops-motion-duration-orb-state: 0ms; } }