/* Hallmark · tokens · theme: Hutan (modern-minimal) · anchor hue: 160 (jade green) * Paper band: light (dark mode provided) · display style: grotesk-sans (Geist) · accent hue: cool green * Success is shifted to teal (hue 205) so a refund never reads as the accent. * Every colour and font in the YourMail mockups comes from this file. No inline values in pages. */ :root { color-scheme: light; /* Paper and ink, tinted toward the green anchor (hue 155). */ --color-paper: oklch(96.5% 0.006 155); --color-paper-2: oklch(94% 0.008 155); --color-paper-3: oklch(91% 0.010 155); --color-surface: oklch(98.6% 0.004 155); /* cards and frames sit one step above paper */ --color-rule: oklch(87% 0.010 155); /* hairlines */ --color-rule-strong: oklch(60% 0.013 155); /* control borders, 3:1 against surface */ --color-muted: oklch(50% 0.016 155); /* captions, meta */ --color-neutral: oklch(38% 0.016 155); --color-ink-2: oklch(30% 0.016 155); /* body copy */ --color-ink: oklch(20% 0.013 155); /* headings, primary buttons */ --color-accent: oklch(60% 0.130 160); /* green mark: underline, pins, focus. Never text on paper */ --color-accent-text: oklch(46% 0.105 160); /* green when it has to be text (AA on paper) */ --color-accent-ink: oklch(19% 0.012 160); /* text on a green fill */ --color-accent-wash: oklch(94% 0.035 160); /* faint green tint behind the code that arrived */ --color-focus: oklch(52% 0.130 160); --color-success: oklch(44% 0.080 205); /* refund / saldo kembali (teal), always paired with text */ --color-success-wash: oklch(95% 0.022 205); --color-danger: oklch(45% 0.160 22); /* errors, always paired with an icon and text */ --color-danger-wash: oklch(95% 0.025 22); --shadow-float: 0 1px 2px oklch(20% 0.01 155 / 0.06), 0 24px 48px -28px oklch(20% 0.02 155 / 0.30); --shadow-bar: 0 -1px 0 oklch(20% 0.01 155 / 0.06); --color-scrim: oklch(20% 0.010 155 / 0.45); /* behind dialogs */ --color-qr-paper: oklch(99% 0.002 155); /* QR tiles stay light in both themes so phones can scan them */ --color-qr-ink: oklch(18% 0.010 155); /* Type: one family for display and body (Geist), one mono for data, one outlier for the wordmark. */ --font-display: "Geist", "General Sans", ui-sans-serif, system-ui, sans-serif; --font-body: "Geist", "General Sans", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-wordmark: "Bricolage Grotesque", "Geist", ui-sans-serif, sans-serif; --weight-body: 400; --weight-strong: 600; --weight-display: 700; /* Scale: five sizes per page, major-third steps. */ --text-sm: 0.875rem; /* 14 meta, captions */ --text-base: 1.0625rem; /* 17 body */ --text-lg: 1.25rem; /* 20 lede, card titles */ --text-xl: clamp(1.75rem, 1.6vw + 1.2rem, 2.375rem); /* 28 to 38 section heads, codes */ --text-display: clamp(2.5rem, 3.4vw + 0.75rem, 3.75rem); /* 40 to 60 hero, two lines on desktop */ --lh-display: 1.02; --lh-head: 1.12; --lh-body: 1.55; --tracking-display: -0.032em; --tracking-head: -0.02em; /* 4 pt spacing scale, named by role. */ --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 9rem; --page-max: 76rem; --page-gutter: clamp(1rem, 4vw, 2.5rem); --measure: 62ch; /* App shell (dashboard, admin). */ --side-width: 15rem; --topbar-h: 3.5rem; /* phone and tablet top bar */ --tabbar-h: 4rem; /* bottom tab bar, without the safe-area inset */ /* Shape rule: buttons and the nav are pills, containers 16, controls 10, small tags 6. */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; --rule-hair: 1px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 400; --z-toast: 500; } /* Dark: same hues, lightness flipped, accent lifted and calmed. */ :root[data-theme="dark"] { color-scheme: dark; --color-paper: oklch(17% 0.010 155); --color-paper-2: oklch(20% 0.012 155); --color-paper-3: oklch(24% 0.013 155); --color-surface: oklch(21.5% 0.012 155); --color-rule: oklch(31% 0.013 155); --color-rule-strong: oklch(54% 0.016 155); --color-muted: oklch(72% 0.013 155); --color-neutral: oklch(80% 0.013 155); --color-ink-2: oklch(88% 0.010 155); --color-ink: oklch(95.5% 0.008 155); --color-accent: oklch(73% 0.130 162); --color-accent-text: oklch(81% 0.105 162); --color-accent-ink: oklch(17% 0.012 160); --color-accent-wash: oklch(28% 0.045 162); --color-focus: oklch(77% 0.120 162); --color-success: oklch(80% 0.085 205); --color-success-wash: oklch(27% 0.035 205); --color-danger: oklch(78% 0.120 22); --color-danger-wash: oklch(28% 0.050 22); --shadow-float: 0 1px 0 oklch(100% 0 0 / 0.04) inset, 0 24px 48px -28px oklch(0% 0 0 / 0.60); --shadow-bar: 0 -1px 0 oklch(100% 0 0 / 0.06); --color-scrim: oklch(5% 0.005 155 / 0.62); --weight-body: 380; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-paper: oklch(17% 0.010 155); --color-paper-2: oklch(20% 0.012 155); --color-paper-3: oklch(24% 0.013 155); --color-surface: oklch(21.5% 0.012 155); --color-rule: oklch(31% 0.013 155); --color-rule-strong: oklch(54% 0.016 155); --color-muted: oklch(72% 0.013 155); --color-neutral: oklch(80% 0.013 155); --color-ink-2: oklch(88% 0.010 155); --color-ink: oklch(95.5% 0.008 155); --color-accent: oklch(73% 0.130 162); --color-accent-text: oklch(81% 0.105 162); --color-accent-ink: oklch(17% 0.012 160); --color-accent-wash: oklch(28% 0.045 162); --color-focus: oklch(77% 0.120 162); --color-success: oklch(80% 0.085 205); --color-success-wash: oklch(27% 0.035 205); --color-danger: oklch(78% 0.120 22); --color-danger-wash: oklch(28% 0.050 22); --shadow-float: 0 1px 0 oklch(100% 0 0 / 0.04) inset, 0 24px 48px -28px oklch(0% 0 0 / 0.60); --shadow-bar: 0 -1px 0 oklch(100% 0 0 / 0.06); --color-scrim: oklch(5% 0.005 155 / 0.62); --weight-body: 380; } }