/* ========================================================================== Digital Naka — design tokens Single source of truth. No component hardcodes a hex value. Warm, light, mobile-first. Green reads as "go, you have work" and survives bright outdoor light; marigold is the shrine-flower / hi-vis accent and is rationed to the rating fill, the pass stamp and one hero detail. CONTRAST NOTE (measured, not assumed): marigold on white is 1.9:1 — it can never be text or a hairline on white. It is only ever a FILL with --ink on top (9.6:1). --deep on white is 6.4:1. ========================================================================== */ :root { /* ---- Palette ---- */ --paper: #FBFAF6; /* page background, warm off-white */ --surface: #FFFFFF; /* cards, sheets, inputs */ --mist: #EEF1EC; /* quiet fills, chips, dividers, skeletons */ --deep: #0E6B5C; /* brand primary — buttons, active, rings */ --marigold: #FF9E1B; /* energy accent — fills only, never text */ --ink: #14201C; /* primary text, near-black w/ green undertone */ --muted: #5E6D66; /* secondary text — 5.2:1 paper, 4.8:1 mist */ --alert: #C4442E; /* errors only */ /* Derived, kept as tokens so components never compute colour */ --deep-press: #0A5548; /* pressed state of primary */ --deep-tint: #E7F1EF; /* selected row wash, focus halo base */ --deep-line: #C5DED8; /* border on a deep-tinted surface */ --marigold-tint: #FFF3E0; --marigold-line: #FFD79B; --alert-tint: #FBEAE7; --ink-08: rgba(20, 32, 28, 0.08); --ink-12: rgba(20, 32, 28, 0.12); --scrim: rgba(20, 32, 28, 0.35); /* sheet backdrop */ /* ---- Type ---- */ --font-display: "DM Sans Display DN", "DM Sans DN", system-ui, sans-serif; --font-body: "DM Sans DN", system-ui, -apple-system, sans-serif; --font-mono: "Plex Mono DN", ui-monospace, "SF Mono", Menlo, monospace; --font-gu: "Mukta Vaani DN", "DM Sans DN", sans-serif; --font-hi: "Mukta DN", "DM Sans DN", sans-serif; /* Scale: 13 / 15 / 17 / 20 / 24 / 32 / 44 */ --fs-13: 0.8125rem; --fs-15: 0.9375rem; --fs-17: 1.0625rem; /* base — iOS-native feel */ --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-32: 2rem; --fs-44: 2.75rem; --lh-body: 1.5; --lh-tight: 1.16; /* ---- Shape ---- */ --r-input: 14px; --r-card: 24px; --r-sheet: 28px; --r-pill: 999px; /* ---- Depth: layered warm shadows, never hard borders ---- */ --shadow-sm: 0 1px 2px rgba(20, 32, 28, 0.05); --shadow-md: 0 4px 16px rgba(20, 32, 28, 0.06); --shadow-lg: 0 12px 32px rgba(20, 32, 28, 0.10); --shadow-cta: 0 6px 18px rgba(14, 107, 92, 0.28); /* ---- Spacing: 4 / 8 / 12 / 16 / 24 / 32 / 48 ---- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --gutter: 20px; /* ---- Sizing ---- */ --h-input: 56px; --h-button: 56px; --h-option: 64px; --tap: 48px; --h-header: 56px; --col: 440px; /* desktop is this column on a soft backdrop, nothing more */ /* ---- Motion ---- */ --ease-slide: cubic-bezier(0.32, 0.72, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1); --d-fast: 180ms; --d-slide: 280ms; --d-sheet: 320ms; /* ---- Inline assets (no extra requests; CSP stays script-src 'self') ---- */ --tick-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='M1.5 5.5L5 9L12.5 1.5' stroke='%2314201C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --search-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235E6D66' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); /* Paper grain for the gate pass — very low alpha, drawn not downloaded. */ --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.055'/%3E%3C/svg%3E"); } /* ========================================================================== Dark mode (§5.7) Only the palette is redefined — every size, radius and duration above is theme-independent, so components need no dark-specific rules. Three states: an explicit choice stamps data-theme on ; the default "system" setting stamps nothing and falls to prefers-color-scheme. Marigold keeps the same fill-only rule: it never becomes text. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #0F1613; --surface: #161F1B; --mist: #1F2A25; --deep: #2E9B86; --marigold: #FFB347; --ink: #E8EEEB; --muted: #9BAAA3; --alert: #E4705C; --deep-press: #45B7A0; --deep-tint: #12312B; --deep-line: #2A5D53; --marigold-tint: #33260F; --marigold-line: #6B4E1C; --alert-tint: #331B17; --ink-08: rgba(232, 238, 235, 0.08); --ink-12: rgba(232, 238, 235, 0.14); --scrim: rgba(0, 0, 0, 0.62); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.46); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.58); --shadow-cta: 0 6px 18px rgba(0, 0, 0, 0.50); } } :root[data-theme="dark"] { color-scheme: dark; --paper: #0F1613; --surface: #161F1B; --mist: #1F2A25; --deep: #2E9B86; --marigold: #FFB347; --ink: #E8EEEB; --muted: #9BAAA3; --alert: #E4705C; --deep-press: #45B7A0; --deep-tint: #12312B; --deep-line: #2A5D53; --marigold-tint: #33260F; --marigold-line: #6B4E1C; --alert-tint: #331B17; --ink-08: rgba(232, 238, 235, 0.08); --ink-12: rgba(232, 238, 235, 0.14); --scrim: rgba(0, 0, 0, 0.62); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.46); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.58); --shadow-cta: 0 6px 18px rgba(0, 0, 0, 0.50); }