/* ═══════════════════════════════════════════════════════ HYP Yoga — Design System: Colors + Type Extracted from shared.css and CLAUDE.md (April 2026) ═══════════════════════════════════════════════════════ */ /* ── Fonts ── */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/cormorant-garamond-400.woff2) format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/cormorant-garamond-400-italic.woff2) format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/cormorant-garamond-500.woff2) format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(fonts/cormorant-garamond-500-italic.woff2) format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/inter-300.woff2) format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-400.woff2) format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-500.woff2) format('woff2'); } @font-face { font-family: 'Noto Sans Devanagari'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/noto-sans-devanagari-400.woff2) format('woff2'); } @font-face { font-family: 'Noto Sans Devanagari'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/noto-sans-devanagari-500.woff2) format('woff2'); } :root { /* ── Neutral Palette (cream + warm ink) ── */ --color-bg: #faf8f5; /* page background — cream */ --color-bg-deep: #f0ece6; /* inset / alt-section cream */ --color-text: #2c2a26; /* primary ink (warm near-black) */ --color-text-muted: #6b6560; /* secondary / body-muted */ --color-text-light: #958e85; /* tertiary, captions, metadata */ --color-border: #e0dbd3; /* hairline borders */ --color-white: #ffffff; /* card / surface */ /* ── Primary Accent — Warm Gold ── */ --color-accent: #b8860b; /* dark gold — interactive/accent */ --color-accent-soft: #d4a843; /* lighter gold — hover, gradient-end */ --color-accent-bg: #f5edd8; /* gold tint — chip bg, soft highlight */ /* ── Tier Pillar Colors ── Public (golden amber) · Starter/Study (orange) · Aspirant/Reflect (blue) · Teacher/Illuminate (purple). Pillar usage rule: Teacher-only UI is purple, Aspirant-only is blue, Starter UI is orange, Public UI is golden amber. */ --c-public: #DFC87A; /* Public tier — golden amber, ungated surfaces */ /* Spark Orange — the "flame" color of the Study/Starter tier; ignites exploration via SparkUI */ --spark-orange: #d9621d; --spark-orange-bg: #fdecde; --spark-orange-deep: #a8430e; --c-study: var(--spark-orange); /* Study/Starter tier uses Spark Orange */ --c-study-bg: var(--spark-orange-bg); --c-study-deep: var(--spark-orange-deep); --c-reflect: #1e88b4; /* Reflect — journal blue */ --c-reflect-bg: #e3f1f8; --c-reflect-deep: #155a7a; --c-illuminate: #7c5cbf; /* Illuminate — teacher purple */ --c-illuminate-bg: #ece5f7; --c-illuminate-deep: #5a3f94; /* ── AI Companion Colors ── */ --c-swami: #c47a1a; /* Warm amber */ --c-dharma: #5a8a5e; /* Sage green */ --c-tapas: #1e88b4; /* Journal blue */ /* ── Feature Colors ── */ --c-sparkmarks: #d97706; /* Flame orange — Sparkmarks */ --c-karma: #1e88b4; --c-listen: #009688; --c-voice: #e06666; --c-teacher: #7c5cbf; /* Teacher tier purple / AI Sparks */ /* ── AI Sparks Annotation Colors ── */ --ann-connection: #d9621d; /* flame orange — Textual / Intertextual (matches Study tier) */ --ann-insight: #7c5cbf; /* purple — Insight / Lineage */ --ann-question: #4a9e52; /* green — Deeper question / Teaching Bridge */ --ann-personal: #1e88b4; /* blue — Personal connection */ --ann-source: #b47814; /* amber-gold — Source passage */ --ann-convergence:#b8860b; /* gold — Convergence (tension analysis) */ --ann-tension: #c0392b; /* coral — Tension */ /* ── TapasAI Visual Voice palette ── Mirrors HYPYoga-iOS Core/DesignSystem/Colors.swift speaker tints. "Me" is the practitioner's polished silver; reads distinct from any bot tint. */ --c-me: #A8AEB8; /* silver — practitioner ("Me") */ --c-me-soft: rgba(168,174,184,0.14); --c-me-rim: rgba(168,174,184,0.45); /* ── Temporal Lens triad (past · present · future) ── Matches HYPYoga-iOS lens tints. Sthiti intentionally aliases tapas (the present is the journal-blue Reflect tier identity). */ --c-smriti: #8B6914; /* past — amber memory */ --c-smriti-bg: rgba(139,105,20,0.10); --c-sthiti: var(--c-tapas); /* present — journal-blue (Sthiti = present moment) */ --c-sthiti-bg: rgba(30,136,180,0.10); --c-sankalpa: #4A9E52; /* future — sprouting green */ --c-sankalpa-bg: rgba(74,158,82,0.10); /* ── Liquid Glass surface tokens ── ── Sun/Moon-neutral names. The Moon override block below flips opacities and amplifies glow + halos without renaming any token. Surfaces consume: --lg-tint speaker / lens base color --lg-tint-soft tint at 14% — fill blend --lg-rim-color tint at 45% — inner hairline --lg-glow-a bottom-center glow opacity --lg-spec-a top-left specular opacity --lg-pin-a pinpoint specular opacity (0 in Moon) --lg-rim-a white rim hairline opacity --lg-halo-inner inner outer-halo radius (px) --lg-halo-outer outer outer-halo radius (px) --lg-halo-a-1 inner halo color opacity --lg-halo-a-2 outer halo color opacity --lg-body-a base body opacity (45% Sun, 10% Moon) --lg-radius corner radius for the surface */ --lg-radius: 18px; --lg-body-a: 0.45; --lg-glow-a: 0.30; --lg-spec-a: 0.80; --lg-pin-a: 0.85; --lg-rim-a: 0.80; --lg-rim-inner-a:0.16; --lg-halo-inner: 14px; --lg-halo-outer: 30.8px; --lg-halo-a-1: 0.10; --lg-halo-a-2: 0.04; /* Default surface tint = TapasAI journal blue; surfaces override via inline --lg-tint */ --lg-tint: var(--c-tapas); --lg-tint-soft: rgba(30,136,180,0.14); --lg-rim-color: rgba(30,136,180,0.45); /* ── Semantic Foreground / Background aliases ── */ --fg-1: var(--color-text); --fg-2: var(--color-text-muted); --fg-3: var(--color-text-light); --bg-1: var(--color-bg); --bg-2: var(--color-bg-deep); --bg-surface: var(--color-white); /* short accent aliases */ --accent: var(--color-accent); --accent-soft: var(--color-accent-soft); --accent-bg: var(--color-accent-bg); /* ── Shadows — warm-tinted, never neutral gray ── */ --shadow-soft: 0 1px 3px rgba(184,134,11,0.06), 0 4px 12px rgba(44,42,38,0.03); --shadow-hover: 0 4px 16px rgba(184,134,11,0.10), 0 8px 24px rgba(44,42,38,0.05); --shadow-elevated: 0 8px 32px rgba(184,134,11,0.08), 0 2px 8px rgba(44,42,38,0.04); /* ── Radii ── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; /* buttons */ --radius-lg: 12px; /* cards */ --radius-xl: 16px; /* feature cards / doors */ --radius-pill: 999px; /* ── Spacing (rem-based) ── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 5rem; /* ── Typography Families ── */ --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-sanskrit: 'Noto Sans Devanagari', serif; /* ── Semantic type tokens ── */ --fs-display: clamp(2.25rem, 5vw, 3.75rem); /* hero */ --fs-h1: 2rem; --fs-h2: 1.5rem; --fs-h3: 1.15rem; --fs-body: 1rem; --fs-small: 0.82rem; --fs-eyebrow: 0.75rem; /* uppercase pill labels */ --fs-caption: 0.72rem; --lh-tight: 1.08; --lh-snug: 1.3; --lh-body: 1.7; --lh-loose: 1.85; /* long-form verse translations */ } /* ═══════════════════════════════════════════════════════ SEMANTIC TYPE STYLES ═══════════════════════════════════════════════════════ */ /* Body default */ body.hyp-ds { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-1); background: var(--bg-1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Display — reverent serif, italic for accent phrase */ .hyp-display { font-family: var(--font-serif); font-size: var(--fs-display); font-weight: 500; line-height: var(--lh-tight); letter-spacing: -0.015em; color: var(--fg-1); } .hyp-display em { font-style: italic; color: var(--color-accent); font-weight: 500; } /* Section heading — centered serif */ .hyp-h1 { font-family: var(--font-serif); font-size: var(--fs-h1); font-weight: 400; line-height: var(--lh-snug); } .hyp-h2 { font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 400; line-height: var(--lh-snug); } .hyp-h3 { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 500; line-height: var(--lh-snug); } /* Body copy */ .hyp-p { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 400; color: var(--fg-1); line-height: var(--lh-body); } .hyp-p--muted { color: var(--fg-2); } .hyp-p--small { font-size: var(--fs-small); font-weight: 300; line-height: 1.8; } /* Eyebrow — the signature pill */ .hyp-eyebrow { display: inline-block; font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); padding: 0.35rem 0.9rem; background: var(--color-accent-bg); border-radius: var(--radius-pill); } /* Verse / Sutra translation — long-form reading */ .hyp-verse { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 400; line-height: var(--lh-loose); color: var(--fg-1); } /* Sanskrit / Devanagari */ .hyp-sanskrit { font-family: var(--font-sanskrit); font-weight: 400; color: var(--fg-2); } /* IAST transliteration — serif italic */ .hyp-iast { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--color-accent); } /* Caption / metadata */ .hyp-caption { font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: 500; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.08em; } /* Inline code (rare — only in dev docs) */ .hyp-code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.88em; background: var(--color-bg-deep); padding: 0.1em 0.35em; border-radius: var(--radius-xs); color: var(--color-accent); } /* ═══════════════════════════════════════════════════════ LIQUID GLASS — Sun / Moon Lexicon Mirrors HYPYoga-iOS Core/UI/LiquidGlass.swift recipe. Sun (default) = reflective bright glass. Moon = transmissive glass where the tint glow becomes the light source. Scoped: only surfaces that carry .lg-surface react. Other pages stay in their cream palette until a follow-up project rolls Moon out site-wide. ═══════════════════════════════════════════════════════ */ [data-lexicon="moon"] { --lg-body-a: 0.10; /* nearly transparent body — tint becomes light source */ --lg-glow-a: 0.85; /* glow amplified ~2.8× */ --lg-spec-a: 0.55; --lg-pin-a: 0.00; /* pinpoint specular suppressed in Moon */ --lg-rim-a: 0.55; --lg-rim-inner-a:0.45; /* tinted inner hairline amplified */ --lg-halo-inner: 22px; /* 1.6× */ --lg-halo-outer: 108px; /* 3.5× */ --lg-halo-a-1: 0.28; --lg-halo-a-2: 0.14; } /* Reusable Liquid Glass surface. Consumers may override --lg-tint, --lg-tint-soft, --lg-rim-color inline (e.g. a Smṛti lens card sets --lg-tint: var(--c-smriti)). Layer stack, bottom → top: (1) tint-soft body fill — body color (2) radial body gradient — frosted-glass body (3) radial bottom-center glow — tint rising from y=110% (4) radial top-left specular — reflective highlight (5) radial pinpoint specular — bright dot (Sun only) (6) white rim hairline — top edge highlight (7) tinted inner hairline — bottom edge tint (8) dual outer halos — box-shadow stack */ .lg-surface { position: relative; isolation: isolate; border-radius: var(--lg-radius); background: /* (5) pinpoint specular */ radial-gradient(circle at 22% 18%, rgba(255,255,255,var(--lg-pin-a)) 0px, rgba(255,255,255,0) 10px), /* (4) top-left specular */ radial-gradient(120% 90% at 18% 8%, rgba(255,255,255,calc(var(--lg-spec-a) * 0.28)) 0%, rgba(255,255,255,0) 55%), /* (3) bottom-center glow */ radial-gradient(140% 90% at 50% 110%, color-mix(in srgb, var(--lg-tint) calc(var(--lg-glow-a) * 100%), transparent) 0%, transparent 70%), /* (2) frosted body gradient */ radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,var(--lg-body-a)) 0%, rgba(255,255,255,calc(var(--lg-body-a) * 0.55)) 60%, rgba(255,255,255,calc(var(--lg-body-a) * 0.35)) 100%), /* (1) tint-soft body fill */ var(--lg-tint-soft); /* (6) + (7) rims as inset shadows; (8) outer halos */ box-shadow: inset 0 1px 0 0 rgba(255,255,255,var(--lg-rim-a)), inset 0 -1px 0 0 color-mix(in srgb, var(--lg-tint) calc(var(--lg-rim-inner-a) * 100%), transparent), 0 0 0 0.5px color-mix(in srgb, var(--lg-tint) 25%, transparent), 0 4px var(--lg-halo-inner) 0 color-mix(in srgb, var(--lg-tint) calc(var(--lg-halo-a-1) * 100%), transparent), 0 12px var(--lg-halo-outer) 0 color-mix(in srgb, var(--lg-tint) calc(var(--lg-halo-a-2) * 100%), transparent); } /* Mobile + touch — simplified recipe. iOS Safari + Android Chrome drop to single-digit fps with stacked backdrop-filter + multi-stop shadows. */ @media (pointer: coarse) and (max-width: 600px) { .lg-surface { background: radial-gradient(140% 90% at 50% 110%, color-mix(in srgb, var(--lg-tint) calc(var(--lg-glow-a) * 60%), transparent) 0%, transparent 65%), var(--lg-tint-soft); box-shadow: inset 0 1px 0 0 rgba(255,255,255,calc(var(--lg-rim-a) * 0.7)), 0 2px 8px 0 color-mix(in srgb, var(--lg-tint) calc(var(--lg-halo-a-1) * 80%), transparent); } } /* Performance — non-most-recent assistant messages drop the dual halos. The currently-streaming or latest reply still gets the full glow treatment. */ .chat-msg.assistant:not(:last-of-type).lg-surface, .lg-surface.lg-quiet { box-shadow: inset 0 1px 0 0 rgba(255,255,255,calc(var(--lg-rim-a) * 0.6)), inset 0 -1px 0 0 color-mix(in srgb, var(--lg-tint) calc(var(--lg-rim-inner-a) * 60%), transparent), 0 2px 8px 0 color-mix(in srgb, var(--lg-tint) calc(var(--lg-halo-a-1) * 60%), transparent); } /* Containment — keep paint local for long chat threads. */ .lg-surface { contain: layout paint; }