@layer reset, base, components, modules, utilities, native, platform; /* Tokens sit in the `base` layer, like the element defaults that read them: nothing later needs to beat a custom property on the root. */ @layer base { :root { color-scheme: light; /* Text */ --font-sans: "Roboto", sans-serif; --font-mono: "Space Mono", monospace; --base-font-size: 1rem; /* Layout. The content column is the width `main`, the bars and the marketing header share; the gutter is the page's side padding on a phone, and what a full-bleed rule cancels to reach the edge. */ --nav-height: 72px; --inv-input-height: 44px; --gutter: 20px; --content-max-inline-size: none; @media (width >= 1024px) { --gutter: 0px; --content-max-inline-size: 940px; } @media (width >= 1280px) { --content-max-inline-size: 1164px; } @media (width >= 1920px) { --content-max-inline-size: 1180px; } /* Shape: fields and menu rows, panels and list cards, the page's cards, the hero cards, and the pills. */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* Depth: a block pinned over the page as it scrolls, what floats over the page, the fixed bar, a sheet or a tour that covers the app, and the toasts over everything. */ --z-sticky: 10; --z-popover: 60; --z-nav: 100; --z-sheet: 200; --z-toast: 300; /* Palette. Every token carries both themes in a `light-dark()`, picked by the `color-scheme` the root sets below; components read only the `--color-*` tokens. A colour at an opacity is the token's own channels with an alpha (`oklch(from var(--color-brand) l c h / 22%)`). */ /* Brand. The brand as a surface — buttons, avatars, the active pill — is the logo's own purple in both themes (`-fill`): it carries white, which reads on it at 6.9:1 either way. `--color-brand` is the brand as ink and line, and that one is lifted for the dark, where the purple itself would sink. */ --color-brand: light-dark(oklch(0.5067 0.2805 293.36), oklch(0.74 0.19 293)); --color-brand-strong: light-dark(oklch(0.446 0.2477 293.1), oklch(0.81 0.14 293)); --color-brand-inverted: oklch(0.709 0.1592 293.54); --color-brand-tint: light-dark(oklch(0.93 0.0335 302.74), oklch(0.29 0.08 293)); --color-brand-fill: oklch(0.5067 0.2805 293.36); --color-brand-fill-strong: light-dark(oklch(0.446 0.2477 293.1), oklch(0.57 0.27 293)); --color-link: var(--color-brand); /* Surfaces */ --color-canvas: light-dark(oklch(0.9708 0.0133 290.75), oklch(0.15 0.02 290)); --color-surface: light-dark(oklch(1 0 0), oklch(0.215 0.028 290)); /* What a scanned code sits on: white in both themes, as a banking app's camera expects the quiet zone around a QR code to be. */ --color-code-surface: light-dark(oklch(1 0 0), oklch(1 0 0)); --color-surface-tint: light-dark(oklch(0.9772 0.0121 296.36), oklch(0.265 0.032 290)); --color-surface-inverted: light-dark(oklch(0.229 0.0817 287.3), oklch(0.31 0.06 288)); /* The translucent bar, the hairline under it, and the rim of the pills that sit in it (language, theme, the phone menu button). In the dark the bar is a lighter band with a brand-tinted line, and the rims are firmer, so the chrome reads as chrome and not as more of the page. */ --color-glass: light-dark(oklch(1 0 0 / 70%), oklch(0.265 0.032 290 / 85%)); --color-glass-edge: light-dark(oklch(0.8975 0.0402 298.2 / 60%), oklch(0.74 0.19 293 / 35%)); --color-pill-edge: light-dark(oklch(0.5067 0.2805 293.36 / 16%), oklch(0.74 0.19 293 / 45%)); /* Ink */ --color-ink: light-dark(oklch(0.2178 0 0), oklch(0.96 0.008 290)); --color-ink-secondary: light-dark(oklch(0.3211 0 0), oklch(0.86 0.015 290)); --color-ink-muted: light-dark(oklch(0.6304 0.0405 293.7), oklch(0.7 0.035 293)); --color-ink-faint: light-dark(oklch(0.7604 0.0479 299.11), oklch(0.55 0.045 295)); --color-ink-inverted: oklch(1 0 0); --color-ink-inverted-muted: oklch(0.7756 0.0514 295.36); /* Borders */ --color-border: light-dark(oklch(0.8975 0.0402 298.2), oklch(0.37 0.045 292)); --color-border-subtle: light-dark(oklch(0.9477 0.0181 303.41), oklch(0.29 0.032 292)); --color-border-strong: light-dark(oklch(0.8124 0.0791 295.23), oklch(0.5 0.09 293)); /* Signals */ --color-negative: light-dark(oklch(0.6307 0.194 29.44), oklch(0.7 0.17 27)); --color-negative-strong: light-dark(oklch(0.5433 0.174 29.7), oklch(0.78 0.13 25)); --color-negative-tint: light-dark(oklch(0.9579 0.0163 17.44), oklch(0.28 0.05 25)); --color-negative-border: light-dark(oklch(0.8586 0.0503 18.18), oklch(0.42 0.1 25)); --color-positive: light-dark(oklch(0.515 0.1237 147.58), oklch(0.66 0.15 150)); --color-positive-bright: oklch(0.728 0.2173 144.71); --color-positive-tint: light-dark(oklch(0.9535 0.023 172.86), oklch(0.28 0.04 160)); --color-warning: light-dark(oklch(0.5319 0.1133 61.96), oklch(0.68 0.13 65)); --color-warning-tint: light-dark(oklch(0.9756 0.0244 83.42), oklch(0.28 0.05 80)); --color-warning-border: light-dark(oklch(0.9063 0.0776 91.28), oklch(0.42 0.08 85)); /* The ink shadows are cast in: the surface's own dark by day, black by night, always read at an opacity. */ --color-shadow: light-dark(oklch(0.229 0.0817 287.3), oklch(0 0 0)); /* Effects: a card resting on the page, a panel floating over it, a card lifted off it, the auth card's brand halo, and the focus glow. */ --shadow-card: 0 1px 3px oklch(from var(--color-shadow) l c h / 5%); --shadow-popover: 0 10px 30px oklch(from var(--color-shadow) l c h / 12%); --shadow-lifted: 0 18px 48px oklch(from var(--color-shadow) l c h / 22%); --shadow-glow: 0 4px 40px oklch(from var(--color-brand) l c h / 8%); --shadow-focus: 0 0 14px oklch(from var(--color-brand) l c h / 22%); /* The wordmark is an image with its own fills: the mark and the ".to" in brand purple, the name in ink. Dark mode swaps in the all-white file — on a dark bar the purple sank, and the mark reads as a mark. */ --image-wordmark: url("/assets/logo-faktura-new2-00c9c267.svg"); /* Which side of the theme the page is on, as a number a component can multiply by: the theme switch slides its knob and swaps its sun for a moon off this, without naming a theme itself. */ --scheme-dark: 0; /* Glyphs drawn into form controls. A data URI cannot read `currentColor`, so each carries its own stroke and is redefined for dark mode below. */ --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333333' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --icon-chevron-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --icon-chevron-brand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23A78BFA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --icon-envelope: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='3.5' width='15' height='11' rx='2' stroke='%23B8A8D4' stroke-width='1.5'/%3E%3Cpath d='M1.5 7L9 11.5L16.5 7' stroke='%23B8A8D4' stroke-width='1.5'/%3E%3C/svg%3E"); --icon-shield: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1.5L2.25 4.5V9C2.25 12.6 5.1 15.975 9 17C12.9 15.975 15.75 12.6 15.75 9V4.5L9 1.5Z' stroke='%23B8A8D4' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Dark mode /* ------------------------------------------------------------------------ The palette picks its dark side off `color-scheme`, so the theme is one declaration. `html[data-theme]` is a signed-in user's choice: "dark" is dark, "system" follows the device, and a page with no attribute at all — the home page, sign-in, anyone not signed in — stays light whatever the device prefers. What is not a colour — the wordmark, the theme number, the glyphs a data URI has to carry its stroke in — cannot ride on `light-dark()`, so those few are the one block written twice. */ html[data-theme="dark"] { color-scheme: dark; --image-wordmark: url("/assets/logo-faktura-dark-9ed6d7a7.svg"); --scheme-dark: 1; --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D0CBE0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --icon-chevron-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239A94B0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --icon-envelope: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='3.5' width='15' height='11' rx='2' stroke='%238A82AB' stroke-width='1.5'/%3E%3Cpath d='M1.5 7L9 11.5L16.5 7' stroke='%238A82AB' stroke-width='1.5'/%3E%3C/svg%3E"); --icon-shield: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1.5L2.25 4.5V9C2.25 12.6 5.1 15.975 9 17C12.9 15.975 15.75 12.6 15.75 9V4.5L9 1.5Z' stroke='%238A82AB' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"); } @media (prefers-color-scheme: dark) { html[data-theme="system"] { color-scheme: dark; --image-wordmark: url("/assets/logo-faktura-dark-9ed6d7a7.svg"); --scheme-dark: 1; --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D0CBE0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --icon-chevron-muted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239A94B0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --icon-envelope: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='3.5' width='15' height='11' rx='2' stroke='%238A82AB' stroke-width='1.5'/%3E%3Cpath d='M1.5 7L9 11.5L16.5 7' stroke='%238A82AB' stroke-width='1.5'/%3E%3C/svg%3E"); --icon-shield: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1.5L2.25 4.5V9C2.25 12.6 5.1 15.975 9 17C12.9 15.975 15.75 12.6 15.75 9V4.5L9 1.5Z' stroke='%238A82AB' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"); } } }