/* ========================================================================== SiteMura.ph — Design tokens Single source of truth for color, type, space and motion. RULE: components never hard-code a color. Always go through a token here. ========================================================================== */ :root { /* --- Brand constants (do not theme these) ------------------------------ */ --brand-navy: #1a2744; --brand-blue: #1a6ef5; --brand-blue-deep: #0f4fc0; /* Traffic-light dots from the logo mark. Used as SEMANTIC color only: green = included / guaranteed, amber = most popular, red = risk / refund. */ --dot-red: #e8503a; --dot-amber: #f5b81a; --dot-green: #35a94b; /* --- Light theme (default) --------------------------------------------- */ --ground: #f4f7fb; /* page background — cool paper, blue-biased */ --surface: #ffffff; /* cards, panels */ --surface-sunken: #eaf0f9; /* table stripes, wells */ --surface-invert: #14203a; /* dark bands inside a light page */ --ink: #14203a; /* headings */ --ink-body: #33415c; /* running text */ --ink-muted: #64748f; /* captions, meta, table labels */ --ink-invert: #f2f6fd; /* text on --surface-invert */ --ink-invert-muted: #9fb0cc; --line: #dce5f1; /* hairlines */ --line-strong: #c1d0e5; /* table headers, focused inputs */ --accent: var(--brand-blue); --accent-hover: var(--brand-blue-deep); --accent-ink: #ffffff; /* text on an accent fill */ --accent-soft: #e5efff; /* accent-tinted wash */ --accent-line: #b9d3ff; --ok: #1f8a3b; --ok-soft: #e4f5e8; --warn: #a3730b; --warn-soft: #fdf2d8; --alert: #c0402b; --alert-soft: #fbe8e4; /* Layered rather than single-blur. Real objects cast a tight contact shadow AND a wide ambient one; one blur alone is what makes a card look pasted on. */ --shadow-sm: 0 1px 1px rgba(20, 32, 58, .04), 0 2px 4px rgba(20, 32, 58, .04); --shadow-md: 0 1px 1px rgba(20, 32, 58, .03), 0 4px 8px rgba(20, 32, 58, .05), 0 12px 22px rgba(20, 32, 58, .05); --shadow-lg: 0 1px 1px rgba(20, 32, 58, .03), 0 8px 16px rgba(20, 32, 58, .06), 0 26px 52px rgba(20, 32, 58, .10); /* Top-edge highlight. Catches the light on a raised surface — the detail that separates a real material from a rectangle with a border. */ --edge: inset 0 1px 0 rgba(255, 255, 255, .75); --ring: 0 0 0 3px var(--accent-soft); /* --- Type -------------------------------------------------------------- */ --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --step--2: 0.75rem; /* 12px — micro labels */ --step--1: 0.8125rem; /* 13px — captions, table cells */ --step-0: 1rem; /* 16px — body */ --step-1: 1.0625rem; /* 17px — lead-in body */ --step-2: clamp(1.1875rem, 1.11rem + 0.38vw, 1.4375rem); --step-3: clamp(1.375rem, 1.2rem + 0.88vw, 1.9375rem); --step-4: clamp(1.75rem, 1.42rem + 1.65vw, 2.75rem); --step-5: clamp(2.125rem, 1.55rem + 2.9vw, 4rem); --leading-tight: 1.1; --leading-snug: 1.3; --leading-body: 1.65; --measure: 65ch; /* --- Space (4px base) --------------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; --container: 1160px; --container-narrow: 760px; --header-h: 68px; /* --- Motion ------------------------------------------------------------- */ --ease: cubic-bezier(.2, .7, .3, 1); --dur-fast: 120ms; --dur: 220ms; --dur-slow: 480ms; } /* --- Dark theme ------------------------------------------------------------- Two blocks on purpose: 1. prefers-color-scheme, guarded so an explicit light choice still wins. 2. [data-theme="dark"] so the in-page toggle wins over a light OS. Only tokens are redefined here — never component rules. -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #0c1421; --surface: #141e30; --surface-sunken: #1b2740; --surface-invert: #223050; --ink: #eaf0fa; --ink-body: #c3cfe2; --ink-muted: #8b9cb8; --ink-invert: #eaf0fa; --ink-invert-muted: #9fb0cc; --line: #24314c; --line-strong: #354566; --accent: #5b95ff; --accent-hover: #7dabff; --accent-ink: #08101f; --accent-soft: #16294a; --accent-line: #2c4573; --dot-green: #4cc465; --dot-amber: #ffc93d; --dot-red: #ff6a52; --ok: #58cf76; --ok-soft: #12301c; --warn: #f0bf4a; --warn-soft: #33280a; --alert: #ff7a63; --alert-soft: #3a1712; --shadow-sm: 0 1px 1px rgba(0, 0, 0, .40), 0 2px 4px rgba(0, 0, 0, .30); --shadow-md: 0 1px 1px rgba(0, 0, 0, .35), 0 4px 8px rgba(0, 0, 0, .30), 0 12px 22px rgba(0, 0, 0, .30); --shadow-lg: 0 1px 1px rgba(0, 0, 0, .35), 0 8px 16px rgba(0, 0, 0, .35), 0 26px 52px rgba(0, 0, 0, .45); /* On a dark ground the light comes from above far more faintly. */ --edge: inset 0 1px 0 rgba(255, 255, 255, .06); --ring: 0 0 0 3px var(--accent-soft); } } :root[data-theme="dark"] { --ground: #0c1421; --surface: #141e30; --surface-sunken: #1b2740; --surface-invert: #223050; --ink: #eaf0fa; --ink-body: #c3cfe2; --ink-muted: #8b9cb8; --ink-invert: #eaf0fa; --ink-invert-muted: #9fb0cc; --line: #24314c; --line-strong: #354566; --accent: #5b95ff; --accent-hover: #7dabff; --accent-ink: #08101f; --accent-soft: #16294a; --accent-line: #2c4573; --dot-green: #4cc465; --dot-amber: #ffc93d; --dot-red: #ff6a52; --ok: #58cf76; --ok-soft: #12301c; --warn: #f0bf4a; --warn-soft: #33280a; --alert: #ff7a63; --alert-soft: #3a1712; --shadow-sm: 0 1px 1px rgba(0, 0, 0, .40), 0 2px 4px rgba(0, 0, 0, .30); --shadow-md: 0 1px 1px rgba(0, 0, 0, .35), 0 4px 8px rgba(0, 0, 0, .30), 0 12px 22px rgba(0, 0, 0, .30); --shadow-lg: 0 1px 1px rgba(0, 0, 0, .35), 0 8px 16px rgba(0, 0, 0, .35), 0 26px 52px rgba(0, 0, 0, .45); /* On a dark ground the light comes from above far more faintly. */ --edge: inset 0 1px 0 rgba(255, 255, 255, .06); --ring: 0 0 0 3px var(--accent-soft); }