/* INSV Refresh · brand tokens · v1.0 */ /* Logo display face — single source for the whole extension */ @font-face { font-family: 'YoureGone'; src: url(../assets/fonts/youre_gone/Youre_Gone.otf) format('opentype'); font-display: swap; } /* UI + mono faces bundled locally. The Google Fonts CDN is blocked by the MV3 CSP in the packed extension, so these are self-hosted. Both Outfit and JetBrains Mono ship as variable woff2 (one file spans the weight axis), sliced by unicode-range. */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../assets/fonts/outfit/outfit-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../assets/fonts/outfit/outfit-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../assets/fonts/jetbrains-mono/jetbrains-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* ── Brand ───────────────────────── */ --brand-50: #E5F6FD; --brand-200: #B8E5F6; --brand-300: #6FD2F5; --brand-400: #29BBF0; --brand-500: #00A1E0; /* primary */ --brand-600: #0085BB; --brand-700: #006A95; /* Brand at alpha — for tints/borders/glows that used raw rgba(0,161,224,…) */ --brand-a10: color-mix(in srgb, var(--brand-500) 10%, transparent); --brand-a12: color-mix(in srgb, var(--brand-500) 12%, transparent); --brand-a15: color-mix(in srgb, var(--brand-500) 15%, transparent); --brand-a25: color-mix(in srgb, var(--brand-500) 25%, transparent); --brand-a30: color-mix(in srgb, var(--brand-500) 30%, transparent); --brand-a35: color-mix(in srgb, var(--brand-500) 35%, transparent); --brand-a40: color-mix(in srgb, var(--brand-500) 40%, transparent); --brand-a45: color-mix(in srgb, var(--brand-500) 45%, transparent); /* ── Ink (surfaces & text) ───────── */ --ink-50: #F0F3FB; --ink-100: #DDE2F1; --ink-200: #B8BFDB; --ink-300: #8E96BA; --ink-400: #6A7299; --ink-500: #525A80; --ink-600: #3C4675; --ink-700: #29325A; --ink-800: #1B2340; --ink-850: #161D33; /* sunken control surface (one step under 800) */ --ink-950: #0B0F1A; /* darkest surface */ /* ── Accents ─────────────────────── */ --spark-500: #F98764; /* warm coral, logo bolt */ --gold-500: #FFD166; /* paused, and the Support entry (bolt + star family) */ /* ── Semantic ────────────────────── */ --success-500: #22C55E; --success-700: #15803D; /* AA: white text passes on this step, not on 500 */ --danger-500: #EF4444; --danger-600: #DC2626; /* AA: texto branco em danger-500 dá 3.76:1, aqui 4.83:1 */ --info-500: var(--brand-500); --warning-300: #FCD34D; --warning-500: #F59E0B; --warning-600: #D97706; --warning-700: #92400E; /* ── Legacy aliases (kept for backward compat) */ --background-color: var(--ink-950); --green-color: var(--success-500); --red-color: var(--danger-500); --white-color: #FFFFFF; --ice-white-color: var(--ink-100); --light-blue-color: var(--brand-500); --medium-gray-color: var(--ink-800); --light-purple-color: var(--brand-400); --box-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.35), 0 2px 6px -2px rgb(0 0 0 / 0.25); /* ── Radius ──────────────────────── */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px; /* pills: toggles, badges, scrub tracks */ /* ── Spacing (4px base) ──────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-20: 80px; /* ── Type ────────────────────────── */ --font-display: 'YoureGone', sans-serif; /* logo ONLY */ --font-ui: 'Outfit', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Font sizes — single scale shared by every page */ --fs-xs: 0.75rem; /* 12px — meta / labels */ --fs-sm: 0.85rem; /* ~13.6px — secondary text */ --fs-base: 0.9375rem; /* 15px — body */ --fs-lg: 1.25rem; /* 20px — h2 */ --fs-2xl: 1.75rem; /* 28px — page h1 */ --fs-3xl: 2rem; /* 32px — support page hero (deliberate) */ /* Line-heights */ --leading-tight: 1.15; /* headings */ --leading-snug: 1.4; --leading-normal: 1.6; /* body */ --leading-relaxed: 1.75; /* long prose (privacy) */ /* Tracking — size-specific, never one value for every size. Letters read further apart as type grows, so large text tightens; small and uppercase text opens up to stay legible. Expressed in em so tracking scales with the font instead of drifting when the user changes their text size. */ --tracking-display: -0.02em; /* page h1 / support hero */ --tracking-heading: -0.01em; /* section h2 */ --tracking-body: 0; --tracking-micro: 0.03em; /* --fs-xs and below, sentence case */ --tracking-caps: 0.08em; /* uppercase micro-labels and badges */ --tracking-wordmark: 0.055em; /* the display face, set large */ /* Weights — kit tops at 700 */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ── Z-index scale ───────────────── */ --z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; /* ── Motion ──────────────────────── */ /* Custom curves — built-in easings are too weak. Enter/exit use ease-out (instant feedback); on-screen morphs use ease-in-out. Not in the brand kit (identity only) — owned here. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --dur-press: 120ms; /* button press feedback */ --dur-fast: 150ms; /* dropdowns, small popovers */ --dur-base: 200ms; /* default UI transition */ --dur-slow: 250ms; /* larger surfaces */ } /* Dark theme — popup, options, support & privacy all use [data-theme] now */ [data-theme="dark"] { color-scheme: dark; /* native scrollbars/controls flip with the tokens */ --surface: var(--ink-950); --surface-2: var(--ink-800); --surface-sunken: #080B14; /* chrome (topbar/footer) — one step under body */ --border: rgb(255 255 255 / 0.08); --text: var(--ink-50); --text-muted: var(--ink-300); } [data-theme="light"] { color-scheme: light; --surface: #FFFFFF; --surface-2: #F5F6FB; --surface-sunken: #FFFFFF; /* chrome matches surface in light mode */ --border: #E5E7EF; --text: var(--ink-800); --text-muted: #6B7390; } /* ── Theme swap ────────────────────────────────── Switching dark/light repaints the whole page at once. Components declare their own transitions for hover/press, and only some of them list color or background, so a token swap used to animate part of the UI while the rest snapped: the uneven "flicker" effect. Rather than force every component to transition the same properties (which would also slow every hover), the swap is frozen for one frame so the entire page changes instantly. scripts/util.js sets [data-theme-switching] around the attribute change. Opt an element out with data-theme-motion when its own animation must keep running through the swap (the dark mode toggle knob). */ html[data-theme-switching], html[data-theme-switching] *:not([data-theme-motion]):not([data-theme-motion] *), html[data-theme-switching] *:not([data-theme-motion]):not([data-theme-motion] *)::before, html[data-theme-switching] *:not([data-theme-motion]):not([data-theme-motion] *)::after { transition: none !important; }