/* ============================================================ * Daph — production design tokens + daisyUI v5 theme. * ============================================================ * Single source of truth for the live site. Mirrors * `Daph Design System/colors_and_type.css` exactly so the * preview kit and production share token definitions. * * Activated by ``. Loaded AFTER the * daisyUI CDN stylesheet so these variables override the * built-in light/dark themes shipped in the bundle. * ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap"); :root { /* ── Core palette ────────────────────────────────────────── */ --bg: #f6f1ea; --bg-soft: #efe7da; --bg-strong: #e6ded0; --tile: #fff9f2; --ink: #1c1a17; --muted: #6a625b; --accent: #c46a3a; --accent-2: #2f5d56; --info: #2f5d56; --success: #4f7a3f; --warning: #d99a3d; --error: #b3433a; --on-accent: #fff9f2; --on-dark: #f7f2eb; --fg-1: var(--ink); --fg-2: var(--muted); --fg-on-accent: var(--on-accent); /* ── Typography ──────────────────────────────────────────── */ --font-serif: "Fraunces", "Times New Roman", serif; --font-sans: "Space Grotesk", "Arial", sans-serif; --font-mono: "SF Mono", Menlo, "Roboto Mono", monospace; --fs-display: clamp(3rem, 7vw, 5.5rem); --fs-h1: clamp(2.6rem, 6vw, 5rem); --fs-h2: clamp(2rem, 4vw, 3rem); --fs-h3: 1.5rem; --fs-h4: 1.1rem; --fs-lead: 1.125rem; --fs-body: 1rem; --fs-small: 0.85rem; --fs-eyebrow: 0.7rem; --fs-caption: 0.65rem; --lh-tight: 1.02; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.6; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.3em; --tracking-button: 0.18em; /* ── Radii — soft, editorial ─────────────────────────────── */ --radius-pill: 9999px; --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1.25rem; --radius-xl: 20px; --radius-2xl: 26px; /* Legacy alias (styles.css). Keep mapped to the system tile radius. */ --radius: var(--radius-xl); /* ── Shadows — warm, soft, never grey ────────────────────── */ --shadow-sm: 0 6px 18px rgba(21, 16, 12, 0.08); --shadow: 0 12px 36px rgba(21, 16, 12, 0.12); --shadow-lg: 0 22px 60px rgba(25, 18, 12, 0.18); /* Legacy alias — `--shadow-soft` is the medium card shadow. */ --shadow-soft: var(--shadow); /* ── Spacing scale ───────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px; /* ── Motion ──────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --t-fast: 180ms; --t-base: 300ms; --t-slow: 600ms; /* ── Layout ──────────────────────────────────────────────── */ --page-pad-x: 5vw; --page-max: 1536px; --grid-gap: clamp(16px, 2vw, 24px); /* Legacy aliases for older selectors in styles.css */ --serif: var(--font-serif); --sans: var(--font-sans); } /* ── daisyUI v5 theme mapping ─────────────────────────────── */ [data-theme="daph"] { color-scheme: light; /* Surfaces — cream */ --color-base-100: #f6f1ea; --color-base-200: #efe7da; --color-base-300: #e6ded0; --color-base-content: #1c1a17; /* Primary — terracotta */ --color-primary: #c46a3a; --color-primary-content: #fff9f2; /* Secondary — teal */ --color-secondary: #2f5d56; --color-secondary-content: #fff9f2; /* Accent — same terracotta family */ --color-accent: #c46a3a; --color-accent-content: #fff9f2; /* Neutral — soft brown ink */ --color-neutral: #6a625b; --color-neutral-content: #fff9f2; /* Status colors */ --color-info: #2f5d56; --color-info-content: #fff9f2; --color-success: #4f7a3f; --color-success-content: #fff9f2; --color-warning: #d99a3d; --color-warning-content: #1c1a17; --color-error: #b3433a; --color-error-content: #fff9f2; /* Shape language */ --radius-selector: 9999px; --radius-field: 0.75rem; --radius-box: 1.25rem; --size-selector: 0.25rem; --size-field: 0.25rem; --border: 1px; --depth: 1; --noise: 0; } /* ── Base typography ──────────────────────────────────────── */ [data-theme="daph"] body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; } [data-theme="daph"] h1, [data-theme="daph"] h2, [data-theme="daph"] h3, [data-theme="daph"] h4, [data-theme="daph"] .font-serif { font-family: var(--font-serif); } /* ── Semantic helper classes ──────────────────────────────── */ .ds-display { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin: 0; } .ds-h1 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-tight); margin: 0; } .ds-h2 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-snug); margin: 0; } .ds-h3 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-snug); margin: 0; } .ds-lead { font-family: var(--font-sans); font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--fg-2); max-width: 34rem; margin: 0; } .ds-eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--accent-2); margin: 0; } .ds-button-label { font-size: 0.85rem; font-weight: 500; letter-spacing: var(--tracking-button); text-transform: uppercase; } .ds-caption { font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--fg-2); } /* ── daisyUI overrides for system fidelity ────────────────── */ /* Buttons: pill, system tracking, lift on hover (no color shift) */ [data-theme="daph"] .btn { letter-spacing: var(--tracking-button); text-transform: uppercase; font-weight: 500; border-radius: var(--radius-pill); transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); } [data-theme="daph"] .btn-primary { background-color: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 12px 30px rgba(196, 106, 58, 0.25); } [data-theme="daph"] .btn:hover { transform: translateY(-2px); } [data-theme="daph"] .btn-primary:hover { background-color: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 18px 40px rgba(196, 106, 58, 0.32); } [data-theme="daph"] .btn-outline { border-color: rgba(28, 26, 23, 0.2); color: var(--ink); } [data-theme="daph"] .btn-outline:hover { background-color: transparent; border-color: var(--ink); color: var(--ink); } /* Cards: system radius, warm shadow, hover lift */ [data-theme="daph"] .card { border-radius: var(--radius-lg); box-shadow: var(--shadow); border: 1px solid rgba(28, 26, 23, 0.06); background-color: var(--tile); transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); } [data-theme="daph"] .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } [data-theme="daph"] a.card, [data-theme="daph"] .card a.card-link { text-decoration: none; color: inherit; } /* Cards on cream-soft surfaces (bg-base-200) keep the soft fill */ [data-theme="daph"] .card.bg-base-200 { background-color: var(--bg-soft); } /* Cards on teal feature surfaces */ [data-theme="daph"] .card.bg-secondary { background-color: var(--accent-2); border-color: rgba(255, 255, 255, 0.08); } [data-theme="daph"] .card-title { font-family: var(--font-serif); font-weight: 500; } /* Focus rings: 2px terracotta, 4px offset, focus-visible only */ [data-theme="daph"] a:focus-visible, [data-theme="daph"] button:focus-visible, [data-theme="daph"] input:focus-visible, [data-theme="daph"] textarea:focus-visible, [data-theme="daph"] select:focus-visible, [data-theme="daph"] .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } /* ── Class collision overrides ────────────────────────────── * daisyUI v5 ships `.hero` and `.footer` component classes that * conflict with our existing layout. The `.page` ancestor selector * here bumps specificity past any single-class daisyUI rule. */ [data-theme="daph"] .page .hero { min-height: 100vh; min-height: 100dvh; padding: 32px var(--page-pad-x) 72px; display: flex; flex-direction: column; overflow: visible; width: auto; background: transparent; place-items: initial; } [data-theme="daph"] .page .footer { padding: 48px var(--page-pad-x); text-align: center; color: var(--muted); font-size: var(--fs-small); display: block; width: auto; background: transparent; } @media (max-width: 768px) { [data-theme="daph"] .page .hero { padding: 24px var(--page-pad-x) 48px; min-height: auto; } } /* ── Reduced motion — disable transitions and animations ──── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }