/* ============================================================ Applied ICT Course — design tokens Single source of truth for light + dark palettes + font scale. Selectors: html[data-theme="dark"], html[data-font-scale="xs|sm|lg|xl"] (set by the blocking script). Default font scale md = no override. ============================================================ */ html { color-scheme: light; caret-color: var(--ink); --font-size-root: 16px; --font-scale: 1; } html[data-theme="dark"] { color-scheme: dark; } /* Font scale: md = current design (no override). Other steps change root size. rem-based type + inherited body text follow; layout spacing stays px-based. */ html[data-font-scale="xs"] { --font-scale: 0.75; font-size: calc(var(--font-size-root) * var(--font-scale)); } html[data-font-scale="xs"] body { font-size: calc(var(--font-size-root) * var(--font-scale)); } html[data-font-scale="sm"] { --font-scale: 0.875; font-size: calc(var(--font-size-root) * var(--font-scale)); } html[data-font-scale="sm"] body { font-size: calc(var(--font-size-root) * var(--font-scale)); } html[data-font-scale="lg"] { --font-scale: 1.125; font-size: calc(var(--font-size-root) * var(--font-scale)); } html[data-font-scale="lg"] body { font-size: calc(var(--font-size-root) * var(--font-scale)); } html[data-font-scale="xl"] { --font-scale: 1.25; font-size: calc(var(--font-size-root) * var(--font-scale)); } html[data-font-scale="xl"] body { font-size: calc(var(--font-size-root) * var(--font-scale)); } ::selection { background: var(--selection-bg); color: var(--deep); } :root { --blue: #1A2332; --purple-soft: #D6E4F0; --purple-deep: #4A5D8A; --lime: #91FF00; --white: #FFFFFF; --brand-cyan: #01aeed; --paper: #F7F5F1; --surface: #FFFFFF; --surface-2: #F7FBFA; --ink: #1A2332; --deep: #1A2332; --brand: #0F6B6B; --sky: #D6E4F0; --teal: #0F6B6B; --slate: #3D5A73; --amber: #C48A2A; --navy: #243B55; --coral: #C45C4A; --indigo: #4A5D8A; --moss: #3F6F4E; --secondary: #2F6FAD; --secondary-soft: #E8F1F8; --secondary-rgb: 47, 111, 173; --prompt: #2F6FAD; --output: #2F8F5B; --tip-bg: #FCFAF6; --line: rgba(26, 35, 50, 0.08); --line-mid: rgba(26, 35, 50, 0.12); --line-strong: rgba(15, 107, 107, 0.32); --radius-sm: 10px; --radius-md: 14px; --radius-lg: 16px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --gutter-x: 16px; --gutter-y: 16px; --content-max: 48rem; --pad-card: 16px; --pad-bar: 12px 16px; --pad-btn: 8px 14px; --gap-tight: 8px; --gap-md: 12px; --gap-stack: 16px; --shadow-color: 26, 35, 50; --shadow-soft: 0 1px 2px rgba(26, 35, 50, 0.04), 0 10px 28px rgba(26, 35, 50, 0.06); --shadow-card: 0 1px 2px rgba(26, 35, 50, 0.04), 0 12px 32px rgba(36, 59, 85, 0.08); --card-surface: linear-gradient( 165deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 245, 241, 0.9) 48%, rgba(255, 255, 255, 0.96) 100% ); --card-surface-flat: #FFFFFF; --card-border: rgba(255, 255, 255, 0.72); --card-glow: radial-gradient(ellipse 85% 55% at 50% -8%, rgba(15, 107, 107, 0.08), transparent 68%); --font-ui: 'Plus Jakarta Sans', sans-serif; --font-display: 'Noto Serif Bengali', 'Noto Serif', serif; --font-body: 'Noto Sans Bengali', 'Hind Siliguri', sans-serif; --read-ink: #24343c; --read-muted: rgba(26, 35, 50, 0.62); --term: var(--secondary); --cinema-dusk-top: #F7F5F1; --cinema-dusk-mid: #FFFFFF; --cinema-dusk-bot: #EEF3F6; --cinema-hi: var(--secondary); --cinema-text: #1A2332; --cinema-muted: rgba(26, 35, 50, 0.68); --on-brand: #FFFFFF; --sheet-sel: color-mix(in srgb, #1a73e8 22%, var(--surface)); /* Chrome / a11y / native controls — so CSS can stop using raw hex */ --scrim: rgba(26, 35, 50, 0.40); --header-bg: rgba(255, 255, 255, 0.85); --focus-ring: var(--brand); --selection-bg: color-mix(in srgb, var(--brand) 22%, transparent); --l2-page-bg: #fafbff; --scrollbar-track: #f3f9ff; --scrollbar-thumb: #d7eafc; --scrollbar-thumb-hover: #bfdcf8; --scrollbar-track-soft: var(--scrollbar-track); --scrollbar-thumb-soft: var(--scrollbar-thumb); --scrollbar-thumb-soft-hover: var(--scrollbar-thumb-hover); /* Sidebar nav accents (SkillUp pastel circles) */ --nav-0-c: #0F6B6B; --nav-0-bg: #E6F4F1; --nav-0-ring: #B7DED6; --nav-1-c: #2F6FAD; --nav-1-bg: #E8F1F8; --nav-1-ring: #B7CDE8; --nav-2-c: #7C5CF5; --nav-2-bg: #F0EBFF; --nav-2-ring: #D4C8FA; --nav-3-c: #3F6F4E; --nav-3-bg: #E8F3EB; --nav-3-ring: #BDD8C5; --nav-4-c: #C48A2A; --nav-4-bg: #FFF4E0; --nav-4-ring: #F0D9A8; --nav-5-c: #C45C4A; --nav-5-bg: #FCEDEA; --nav-5-ring: #F0C8C0; /* Space-separated RGB channels for Tailwind opacity modifiers (text-ink/65) */ --paper-rgb: 247 245 241; --surface-rgb: 255 255 255; --surface-2-rgb: 247 251 250; --ink-rgb: 26 35 50; --deep-rgb: 26 35 50; --brand-rgb: 15 107 107; --sky-rgb: 214 228 240; --teal-rgb: 15 107 107; --slate-rgb: 61 90 115; --amber-rgb: 196 138 42; --navy-rgb: 36 59 85; --coral-rgb: 196 92 74; --indigo-rgb: 74 93 138; --moss-rgb: 63 111 78; --prompt-rgb: 47 111 173; --output-rgb: 47 143 91; --lime-rgb: 145 255 0; } html[data-theme="dark"] { --blue: #E8EEF2; --purple-soft: #243044; --purple-deep: #9AA8C8; --lime: #91FF00; --white: #FFFFFF; --brand-cyan: #01aeed; --paper: #0F1419; --surface: #161D24; --surface-2: #1C252E; --ink: #E8EEF2; --deep: #F3F6F8; --brand: #3AA6A0; --sky: #243044; --teal: #3AA6A0; --slate: #9BB0C4; --amber: #E0B25A; --navy: #8AA0B8; --coral: #E08A7A; --indigo: #9AA8C8; --moss: #6FBF84; --secondary: #6FA8D8; --secondary-soft: rgba(47, 111, 173, 0.22); --secondary-rgb: 111, 168, 216; --prompt: #7EB3E0; --output: #6FBF84; --tip-bg: #1A222B; --line: rgba(255, 255, 255, 0.08); --line-mid: rgba(255, 255, 255, 0.12); --line-strong: rgba(58, 166, 160, 0.45); --shadow-color: 0, 0, 0; --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.55); --card-surface: linear-gradient( 165deg, #161D24 0%, #0F1419 48%, #161D24 100% ); --card-surface-flat: #161D24; --card-border: rgba(255, 255, 255, 0.08); --card-glow: radial-gradient(ellipse 85% 55% at 50% -8%, rgba(58, 166, 160, 0.12), transparent 68%); --read-ink: #D5DDE4; --read-muted: rgba(232, 238, 242, 0.74); --term: var(--secondary); --cinema-dusk-top: #0F1419; --cinema-dusk-mid: #161D24; --cinema-dusk-bot: #1A222B; --cinema-hi: var(--secondary); --cinema-text: var(--ink); --cinema-muted: rgba(232, 238, 242, 0.68); --on-brand: #0F1419; --scrim: rgba(0, 0, 0, 0.55); --header-bg: rgba(22, 29, 36, 0.86); --focus-ring: var(--brand); --selection-bg: color-mix(in srgb, var(--brand) 32%, transparent); --l2-page-bg: #0F1419; --scrollbar-track: #1C252E; --scrollbar-thumb: #3A4A58; --scrollbar-thumb-hover: #4A5C6C; --nav-0-c: #3AA6A0; --nav-0-bg: rgba(58, 166, 160, 0.16); --nav-0-ring: rgba(58, 166, 160, 0.42); --nav-1-c: #6FA8D8; --nav-1-bg: rgba(47, 111, 173, 0.22); --nav-1-ring: rgba(111, 168, 216, 0.42); --nav-2-c: #A78BFA; --nav-2-bg: rgba(124, 92, 245, 0.22); --nav-2-ring: rgba(167, 139, 250, 0.42); --nav-3-c: #6FBF84; --nav-3-bg: rgba(63, 111, 78, 0.22); --nav-3-ring: rgba(111, 191, 132, 0.42); --nav-4-c: #E0B25A; --nav-4-bg: rgba(196, 138, 42, 0.18); --nav-4-ring: rgba(224, 178, 90, 0.42); --nav-5-c: #E08A7A; --nav-5-bg: rgba(196, 92, 74, 0.18); --nav-5-ring: rgba(224, 138, 122, 0.42); --paper-rgb: 15 20 25; --surface-rgb: 22 29 36; --surface-2-rgb: 28 37 46; --ink-rgb: 232 238 242; --deep-rgb: 243 246 248; --brand-rgb: 58 166 160; --sky-rgb: 36 48 68; --teal-rgb: 58 166 160; --slate-rgb: 155 176 196; --amber-rgb: 224 178 90; --navy-rgb: 138 160 184; --coral-rgb: 224 138 122; --indigo-rgb: 154 168 200; --moss-rgb: 111 191 132; --prompt-rgb: 126 179 224; --output-rgb: 111 191 132; --lime-rgb: 145 255 0; } @media (min-width: 640px) { :root { --gutter-x: 24px; --gutter-y: 20px; } } @media (max-width: 639px) { :root { --gutter-x: 12px; --gutter-y: 12px; } .font-scale, .font-scale-trigger, .theme-toggle { height: 32px; } .font-scale-trigger { min-width: 44px; padding: 0 8px 0 10px; } } /* Compact sun/moon control — landing + unit header + fullscreen chrome */ .theme-toggle { width: 36px; height: 36px; padding: 0; border-radius: 12px; border: 1px solid var(--line-mid); background: var(--surface-2); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .theme-toggle:hover { background: var(--surface); border-color: var(--line-strong); color: var(--brand); } .theme-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .theme-toggle[aria-pressed="true"] { background: color-mix(in srgb, var(--brand) 14%, var(--surface-2)); border-color: var(--line-strong); color: var(--brand); } .fs-chrome-btn.theme-toggle { width: 42px; height: 42px; } /* Font size — card dropdown: A-- · A- · A · A+ · A++ */ .font-scale { position: relative; display: inline-flex; align-items: stretch; height: 36px; flex-shrink: 0; z-index: 2; } .font-scale.is-open { z-index: 60; } .font-scale-select { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; pointer-events: none; } .font-scale-trigger { height: 36px; min-width: 54px; padding: 0 10px 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 12px; border: 1px solid var(--line-mid); background: var(--surface-2); color: var(--ink); box-shadow: none; cursor: pointer; font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .font-scale-trigger:hover { background: var(--surface); border-color: var(--line-strong); color: var(--brand); } .font-scale-trigger:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .font-scale.is-open .font-scale-trigger { background: var(--surface); border-color: var(--line-strong); color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); } .font-scale-trigger-mark { min-width: 1.6em; text-align: center; } .font-scale-caret { width: 7px; height: 7px; margin-top: -3px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); opacity: 0.5; transition: transform 0.18s ease, opacity 0.18s ease; } .font-scale.is-open .font-scale-caret { margin-top: 2px; transform: rotate(225deg); opacity: 0.8; } .font-scale-card { position: absolute; top: calc(100% + 8px); right: 0; z-index: 80; width: 104px; padding: 6px; border-radius: 14px; border: 1px solid var(--line-mid); background: var(--surface); box-shadow: var(--shadow-card); transform-origin: top right; animation: fontScaleCardIn 0.16s ease; } .font-scale-card[hidden] { display: none; } @keyframes fontScaleCardIn { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .font-scale-card { animation: none; } .font-scale-caret { transition: none; } } .font-scale-opt { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 4px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; text-align: center; font-family: var(--font-ui); font-weight: 700; letter-spacing: -0.03em; line-height: 1; transition: background 0.15s ease, color 0.15s ease; } .font-scale-opt:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); } .font-scale-opt:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -1px; } .font-scale-opt.is-active { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); } .font-scale-opt--xs { font-size: 10px; } .font-scale-opt--sm { font-size: 12px; } .font-scale-opt--md { font-size: 14px; } .font-scale-opt--lg { font-size: 16px; } .font-scale-opt--xl { font-size: 18px; } .header-actions .font-scale, .fs-chrome .font-scale { border: 0; background: transparent; } .fs-chrome .font-scale { height: 42px; } .fs-chrome .font-scale-trigger { height: 42px; min-width: 58px; box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); background: color-mix(in srgb, var(--surface) 96%, transparent); } .layout-top-end .theme-toggle { width: 36px; height: 36px; }