/* Clubhouse design tokens. Every colour is defined for both themes; a unit test (tests/test_design.py) checks WCAG AA contrast for the pairs the components use. Theme: theme.js sets data-theme on (Telegram's scheme, then the person's choice). With no data-theme, the system setting decides. */ @font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/inter-latin-wght.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: "Newsreader"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("../fonts/newsreader-latin-wght.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 { /* colour: light */ --canvas: #f4efe4; --card: #fbf8f2; --raised: #fffdf8; --ink: #1c2a21; --muted: #5a665d; --primary: #1e5a3a; --primary-hover: #174a2f; --on-primary: #f4efe4; --accent: #7e5e1c; --focus: #a8842f; --danger: #a33a2c; --warning: #8a5300; --ok: #1e5a3a; --link: #1e5a3a; --hairline: #ddd3c0; --control: #8f8672; --ok-soft: #e2ece1; --warning-soft: #f4e7cc; --danger-soft: #f6e2dd; --neutral-soft: #ebe4d6; /* the initials tile of a course with no logo, and its letters */ --tile-0: #1e5a3a; --tile-1: #7e5e1c; --tile-2: #2f4f6f; --tile-3: #8a3b2e; --tile-4: #4b5a3a; --tile-5: #5a4a6a; --on-tile: #fffdf8; --logo-bg: #ffffff; --scrim: rgb(28 42 33 / 45%); --shadow: 0 12px 32px rgb(28 42 33 / 18%), 0 2px 6px rgb(28 42 33 / 10%); color-scheme: light; /* type */ --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --text-sm: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 21px; --text-2xl: 26px; --text-3xl: 32px; --leading: 1.5; --leading-tight: 1.2; /* space: a 4px grid */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; /* shape */ --r-control: 8px; --r-card: 14px; --r-sheet: 20px; --r-pill: 999px; --tap: 44px; /* motion */ --t-fast: 150ms; --t-med: 200ms; --t-slow: 280ms; --ease: cubic-bezier(0.2, 0, 0, 1); /* safe areas: the device's, or Telegram's when it reports them (tg.js) */ --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-top, 0px)); --safe-right: max(env(safe-area-inset-right, 0px), var(--tg-safe-right, 0px)); --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-bottom, 0px)); --safe-left: max(env(safe-area-inset-left, 0px), var(--tg-safe-left, 0px)); } /* colour: dark. Written twice, for the explicit choice and for the system setting. */ :root[data-theme="dark"] { --canvas: #0d1611; --card: #142019; --raised: #1a2920; --ink: #efe8d8; --muted: #b3ae9c; --primary: #e8ddbf; --primary-hover: #f3ead0; --on-primary: #0d1611; --accent: #d2b46a; --focus: #d2b46a; --danger: #f08b7a; --warning: #e9b45c; --ok: #8fcba5; --link: #d2b46a; --hairline: #2c3d33; --control: #6b7f72; --ok-soft: #193224; --warning-soft: #33280f; --danger-soft: #3a1d18; --neutral-soft: #22302a; --tile-0: #2c6e4a; --tile-1: #8a6a26; --tile-2: #3b5f82; --tile-3: #9a4637; --tile-4: #5a6b46; --tile-5: #6a587c; --on-tile: #fffdf8; --logo-bg: #ffffff; --scrim: rgb(0 0 0 / 60%); --shadow: 0 12px 32px rgb(0 0 0 / 50%), 0 2px 6px rgb(0 0 0 / 30%); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --canvas: #0d1611; --card: #142019; --raised: #1a2920; --ink: #efe8d8; --muted: #b3ae9c; --primary: #e8ddbf; --primary-hover: #f3ead0; --on-primary: #0d1611; --accent: #d2b46a; --focus: #d2b46a; --danger: #f08b7a; --warning: #e9b45c; --ok: #8fcba5; --link: #d2b46a; --hairline: #2c3d33; --control: #6b7f72; --ok-soft: #193224; --warning-soft: #33280f; --danger-soft: #3a1d18; --neutral-soft: #22302a; --tile-0: #2c6e4a; --tile-1: #8a6a26; --tile-2: #3b5f82; --tile-3: #9a4637; --tile-4: #5a6b46; --tile-5: #6a587c; --on-tile: #fffdf8; --logo-bg: #ffffff; --scrim: rgb(0 0 0 / 60%); --shadow: 0 12px 32px rgb(0 0 0 / 50%), 0 2px 6px rgb(0 0 0 / 30%); color-scheme: dark; } } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-med: 0ms; --t-slow: 0ms; } }