/* SeeMail design tokens: the one place colours, type, radii and elevation are defined. Material 3 structure (neutral surface-container tones, M3 shape scale and elevation) with the Sage colours as accents only: SeeMail red for primary actions, Sage blue for links and selection. #E8322B with white text is 4.27:1 (fails AA), so filled buttons and red text use #C62A23 (5.59:1). Used by the webmail app (webmail.css) and the server pages in src/ui.ts. Theme: system by default, forces one (set by /static/theme.js from the user's choice). */ @font-face { font-family: "IBM Plex Sans Thai"; font-display: swap; font-weight: 400; src: url(/static/fonts/ibm-plex-sans-thai-thai-400-normal.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: "IBM Plex Sans Thai"; font-display: swap; font-weight: 600; src: url(/static/fonts/ibm-plex-sans-thai-thai-600-normal.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: "IBM Plex Sans Thai"; font-display: swap; font-weight: 700; src: url(/static/fonts/ibm-plex-sans-thai-thai-700-normal.woff2) format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: Archivo; font-display: swap; font-weight: 400; src: url(/static/fonts/archivo-latin-400-normal.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: Archivo; font-display: swap; font-weight: 600; src: url(/static/fonts/archivo-latin-600-normal.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: Archivo; font-display: swap; font-weight: 700; src: url(/static/fonts/archivo-latin-700-normal.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 { /* accents */ --sage-red: #E8322B; --sage-red-strong: #C62A23; --sage-blue: #1638D8; /* M3 roles, light */ --bg: #F6F8FC; --surface: #FFFFFF; --surface-2: #F0F4F9; --surface-3: #E9EEF6; --search: #E9EEF6; --text: #1F1F1F; --text-2: #5F6368; --text-3: #5F6368; --line: #C4C7C5; --line-2: #E1E3E1; --outline: #747775; --primary: #0B57D0; --on-primary: #FFFFFF; --link: #0B57D0; --focus: #0B57D0; --compose: #C2E7FF; --on-compose: #001D35; --brand: var(--sage-red-strong); --accent: #0B57D0; --tonal: #E9EEF6; --on-tonal: #1F1F1F; --nav-active: #D3E3FD; --on-nav-active: #041E49; --read-row: #F2F6FC; --selected-row: #C2E7FF; --hover: rgb(31 31 31 / .08); --press: rgb(31 31 31 / .12); --danger: var(--sage-red-strong); --on-danger: #FFFFFF; --star: #B06000; --chip: #E9EEF6; --scrim: rgb(0 0 0 / .32); --toast-bg: #303030; --toast-fg: #F2F2F2; --toast-link: #A8C7FA; --menu-bg: #F0F4F9; --frame-bg: #FFFFFF; /* M3 elevation 1-3 */ --shadow-1: 0 1px 2px rgb(0 0 0 / .3), 0 1px 3px 1px rgb(0 0 0 / .15); --shadow-2: 0 1px 2px rgb(0 0 0 / .3), 0 2px 6px 2px rgb(0 0 0 / .15); --shadow-3: 0 4px 8px 3px rgb(0 0 0 / .15), 0 1px 3px rgb(0 0 0 / .3); --row-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line), 0 1px 2px rgb(60 64 67 / .3), 0 1px 3px 1px rgb(60 64 67 / .15); /* M3 shape scale: extra-small 4, small 8, large 16, extra-large 28, full */ --radius-s: 4px; --radius: 8px; --radius-l: 16px; --radius-xl: 28px; --radius-pill: 999px; --font: Archivo, "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #131314; --surface: #1E1F20; --surface-2: #282A2C; --surface-3: #333537; --search: #282A2C; --text: #E3E3E3; --text-2: #C4C7C5; --text-3: #A9ACAA; --line: #444746; --line-2: #333537; --outline: #8E918F; --primary: #FFB4AB; --on-primary: #690003; --link: #A8C7FA; --focus: #A8C7FA; --compose: #93000A; --on-compose: #FFDAD6; --brand: #FFB4AB; --accent: #FFB4AB; --tonal: #333537; --on-tonal: #E3E3E3; --nav-active: #5C1A15; --on-nav-active: #FFDAD6; --read-row: #1B1B1C; --selected-row: #004A77; --hover: rgb(227 227 227 / .08); --press: rgb(227 227 227 / .12); --danger: #FFB4AB; --on-danger: #690003; --star: #FDD663; --chip: #333537; --scrim: rgb(0 0 0 / .6); --toast-bg: #E3E3E3; --toast-fg: #1F1F1F; --toast-link: #0B57D0; --menu-bg: #282A2C; --shadow-1: 0 1px 2px rgb(0 0 0 / .3), 0 1px 3px 1px rgb(0 0 0 / .15); --shadow-2: 0 1px 2px rgb(0 0 0 / .3), 0 2px 6px 2px rgb(0 0 0 / .15); --shadow-3: 0 4px 8px 3px rgb(0 0 0 / .15), 0 1px 3px rgb(0 0 0 / .3); --row-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line), 0 1px 3px rgb(0 0 0 / .6); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #131314; --surface: #1E1F20; --surface-2: #282A2C; --surface-3: #333537; --search: #282A2C; --text: #E3E3E3; --text-2: #C4C7C5; --text-3: #A9ACAA; --line: #444746; --line-2: #333537; --outline: #8E918F; --primary: #FFB4AB; --on-primary: #690003; --link: #A8C7FA; --focus: #A8C7FA; --compose: #93000A; --on-compose: #FFDAD6; --brand: #FFB4AB; --accent: #FFB4AB; --tonal: #333537; --on-tonal: #E3E3E3; --nav-active: #5C1A15; --on-nav-active: #FFDAD6; --read-row: #1B1B1C; --selected-row: #004A77; --hover: rgb(227 227 227 / .08); --press: rgb(227 227 227 / .12); --danger: #FFB4AB; --on-danger: #690003; --star: #FDD663; --chip: #333537; --scrim: rgb(0 0 0 / .6); --toast-bg: #E3E3E3; --toast-fg: #1F1F1F; --toast-link: #0B57D0; --menu-bg: #282A2C; --shadow-1: 0 1px 2px rgb(0 0 0 / .3), 0 1px 3px 1px rgb(0 0 0 / .15); --shadow-2: 0 1px 2px rgb(0 0 0 / .3), 0 2px 6px 2px rgb(0 0 0 / .15); --shadow-3: 0 4px 8px 3px rgb(0 0 0 / .15), 0 1px 3px rgb(0 0 0 / .3); --row-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line), 0 1px 3px rgb(0 0 0 / .6); color-scheme: dark; }