/* ===================================================================== Clasa 0B — design tokens (v3.1) --------------------------------------------------------------------- Single source of truth for colour, type, space, shape, depth, motion. Every component in base.css and every screen CSS reads ONLY these variables — never hard-coded colour values. Checked by: node tools/check-tokens.mjs (contrast, ΔE between colour families, dark blocks identical). FONTS are NOT imported here (an @import would chain render-blocking requests). PWA: the fonts are self-hosted — css/fonts.css (loaded in before this file) declares Inter and Newsreader from fonts/ (latin + latin-ext woff2, SIL OFL; no Google Fonts: it sent every visitor's IP to Google, and the CSP allows no third-party source). Flutter bundles the fonts as assets (GoogleFonts.config .allowRuntimeFetching = false). Fallbacks (Georgia / system UI) have ș ț ă î â, so pages stay correct offline. --------------------------------------------------------------------- COLOUR CHANNELS — one kind of meaning per visual channel: subject / club -> HUE (the pastel palette, --sub-*) audience (who) -> FORM: inverted (Doar noi) · tonal fill (Familia, Partajat) · outline (Clasa, Școala, Personal) ingestion state -> MONOCHROME badge, only the icon is coloured semantic status -> callouts / buttons (danger, warning = amber- orange, success, info, ai) brand -> deep green (primary) + ochre (accent, child avatar ring). Ochre is never a status colour. --------------------------------------------------------------------- FLUTTER MAPPING (explicit — generate CSS + Dart from one tokens.json later, e.g. Style Dictionary, so light/dark/Dart cannot drift): ColorScheme --paper -> surface (Scaffold background) --surface-muted -> surfaceDim --surface -> surfaceContainerLowest (cards, sheets) --surface-2 -> surfaceContainerLow --surface-3 -> surfaceContainerHigh --ink -> onSurface --muted -> onSurfaceVariant --control-border -> outline (3:1 control boundaries) --line -> outlineVariant (hairlines) --primary / --on-primary / --primary-soft / --on-primary-soft -> primary / onPrimary / primaryContainer / onPrimaryContainer --accent / --accent-ink / --accent-soft -> tertiary / onTertiaryContainer / tertiaryContainer --danger / --on-danger / --danger-soft / --danger-ink -> error / onError / errorContainer / onErrorContainer --inverse-surface / --on-inverse-surface / --inverse-primary -> inverseSurface / onInverseSurface / inversePrimary --scrim -> scrim ThemeExtension: --ink-2 --subtle --line-strong --paper-2 --primary-ink --brand-tile-* --hero-* --warning* --success* --info* --ai* --surface-glass --scrim-media --on-media --shimmer --focus ThemeExtension : --sub-* ThemeExtension : --aud-* (fg / bg / border) ThemeExtension : --st-*-fg (icon colour only) --primary-hover / --primary-press / --primary-soft-2 are WEB ONLY: Flutter uses state layers (WidgetStateProperty, onColor overlay 8% hover / 10% press). Do not port them as colours. Type -> ThemeExtension (names below, not forced onto M3 names). letterSpacing(px) = em × fontSize. Set leadingDistribution: TextLeadingDistribution.even globally (CSS half-leading). Newsreader is variable: pass fontVariations: [FontVariation('opsz', size)] per display style. text-wrap:balance / hyphens have no Flutter equivalent (accept ellipsis or pre-insert soft hyphens). --sp-* -> const double · --r-* -> BorderRadius.circular(n) --sh-* -> List --dur-* -> Duration · --ease-standard = Easing.standard (0.2,0,0,1), --ease-decelerate = Easing.emphasizedDecelerate (0.05,0.7,0.1,1), --ease-accelerate = Easing.emphasizedAccelerate (0.3,0,0.8,0.15). Honour MediaQuery.disableAnimationsOf(context) in Dart (the CSS reduced-motion switch has no automatic Flutter equivalent). Backdrop blur on bars is an enhancement (optional on low-end Android), never load-bearing. BREAKPOINTS (media queries cannot read custom properties; repeated literally in CSS): mobile ≤ 767px parents & children · bottom tab bar · sheets tablet 768–1099 sheets become centred modals · still tab bar desktop ≥ 1100px teachers: side nav + content + right panel (Flutter: same thresholds through LayoutBuilder. M3 window classes are 600/840/1200; we keep 768/1100 because the teacher layout needs ≥1100 for three columns. Revisit a NavigationRail for 840–1099.) TEXT SCALING: all type tokens are rem. Test with html { font-size: 125% | 200% } (styleguide has a switch). Text- bearing pills use min-height + padding, never a fixed height. Theme: light by default; dark follows the OS unless forces one. data-theme="light" | "dark" | absent (= system). Put the 3-line theme boot script in (see styleguide.html) to avoid a flash of the wrong theme. ===================================================================== */ :root { color-scheme: light; /* ---------- Surfaces & ink ------------------------------------- */ --paper: #f6f3ec; /* app background (warm paper) */ --paper-2: #efebe2; /* sunken areas, calendar gutters */ --surface: #fffdf9; /* cards, sheets */ --surface-2: #faf7f1; /* nested cards, table header, hover */ --surface-3: #f2efe7; /* pressed / selected neutral, tracks */ --surface-muted:#efebe2; /* out-of-month cells (M3 surfaceDim) */ --surface-glass: rgba(255, 253, 249, .86); /* bars with blur */ --ink: #273d36; /* primary text */ --ink-2: #3b4f48; /* secondary headings */ --muted: #5f6c65; /* secondary text, placeholders (AA) */ --subtle: #8b958e; /* decorative icons, disabled — NOT text */ --line: #e4e5da; /* hairlines */ --line-strong: #d3d6c8; /* dividers that must show — NOT controls */ --control-border:#76807a; /* checkbox/radio/switch/input edges ≥3:1 */ --scrim: rgba(28, 38, 33, .38); --scrim-media: rgba(22, 30, 26, .6); /* over photos ("+12") */ --on-media: #ffffff; /* text/icons over photos */ --shimmer: rgba(255, 255, 255, .45); /* ---------- Brand ---------------------------------------------- */ --primary: #315748; /* deep green — FILLED actions, selection */ --primary-hover: #284b3d; /* web only (Flutter: state layer) */ --primary-press: #1f3c30; /* web only */ --on-primary: #fbf8ef; --primary-ink: #315748; /* primary used as TEXT / lines on surface */ --primary-soft: #eaf0e7; /* selected nav, soft buttons (v2) */ --primary-soft-2: #dce7d8; /* web only: hover on soft */ --on-primary-soft:#2a4c3e; --brand-tile-bg: #315748; /* "0B" tile — deep green in BOTH themes */ --brand-tile-fg: #fbf8ef; --accent: #bd9141; /* ochre — brand details, child ring ONLY */ --accent-ink: #7f5c1b; /* ochre used as text (AA) */ --accent-soft: #f9ecc7; /* selection highlight, holiday */ --hero-bg: #eeefdf; /* v2 hero sage-paper */ --hero-bg-2: #e4e9d8; /* hero footer / aside strip */ --hero-line: #d9dfcb; --hero-ink: #4d5f4c; /* hero body text (AA on hero-bg) */ --focus: #8a6420; /* focus ring — ≥4.5:1 on every surface */ --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus); --inverse-surface: #273d36; /* toast, tooltip, skip link */ --on-inverse-surface: #f6f3ec; --inverse-primary: #b9dcc6; /* actions on inverse surface */ /* ---------- Semantic ------------------------------------------- */ --danger: #b24a3b; --danger-ink: #973a2d; --danger-soft: #ffe2da; --warning: #b8641f; --warning-ink: #8f4a12; --warning-soft: #fbe8d8; /* amber-orange, not ochre */ --success: #3d7a53; --success-ink: #2d6040; --success-soft: #e0f3e0; --info: #3d6f8b; --info-ink: #2f5a72; --info-soft: #cce3ef; --on-danger: #ffffff; --ai: #6c55a3; --ai-ink: #5a4390; --ai-soft: #efe8fd; /* AI suggestions */ /* ---------- Subjects & clubs (fg = text/stripe, bg = tint) ------ */ --sub-clr: #a24e3c; --sub-clr-bg: #f7e9e4; /* Comunicare în limba română */ --sub-mem: #86601c; --sub-mem-bg: #f6ecd3; /* Matematică și explorarea mediului */ --sub-dp: #466f56; --sub-dp-bg: #e9f0e5; /* Dezvoltare personală */ --sub-mm: #76568a; --sub-mm-bg: #eee7f1; /* Muzică și mișcare */ --sub-avap: #37707a; --sub-avap-bg: #e5f0ef; /* Arte vizuale și abilități practice */ --sub-eng: #3e6497; --sub-eng-bg: #e4edf9; /* Limba engleză */ --sub-sport: #97522a; --sub-sport-bg: #ffe1cb; /* Educație fizică / sport */ --sub-rob: #56657a; --sub-rob-bg: #dde1e6; /* Robotică */ --sub-inot: #2b7389; --sub-inot-bg: #d8f1f7; /* Înot */ --sub-muz: #8b4f7f; --sub-muz-bg: #fce2f5; /* Muzică (club) */ --sub-sah: #4f5a52; --sub-sah-bg: #dfe0da; /* Șah */ --sub-dans: #9c4064; --sub-dans-bg: #f4dee7; /* Dans */ /* ---------- Audience (who can see it) --------------------------- Encoded by FORM, then icon + label (never colour only): private lock INVERTED (solid ink) — the only inverted chip family home tonal fill shared avatar tonal fill (recipient avatar, else share icon) class users outline school school outline staff shield outline (neutral) bg "transparent" = outlined chip. */ --aud-private-fg: #f6f3ec; --aud-private-bg: #273d36; --aud-private-border: #273d36; --aud-family-fg: #285241; --aud-family-bg: #d4e4d6; --aud-family-border: #b3cdb6; --aud-shared-fg: #5a3f84; --aud-shared-bg: #efe1ff; --aud-shared-border: #cfc0e4; --aud-class-fg: #2f4f78; --aud-class-bg: transparent; --aud-class-border: #2f4f78; --aud-school-fg: #245e62; --aud-school-bg: transparent; --aud-school-border: #245e62; --aud-staff-fg: #3b4f48; --aud-staff-bg: transparent; --aud-staff-border: #3b4f48; /* ---------- Ingestion states (AI pipeline) ---------------------- Neutral badge (surface + line-strong border + ink text); only the icon carries colour (--st-*-fg, ≥3:1 on surface). --st-*-bg is the badge background, kept for API stability (all = surface). primit -> propus (AI) -> verificat (a human) -> publicat | respins */ --st-primit-fg: #5d6975; --st-primit-bg: var(--surface); --st-propus-fg: #6c55a3; --st-propus-bg: var(--surface); --st-verificat-fg: #2f6a8a; --st-verificat-bg: var(--surface); --st-publicat-fg: #2f7a4b; --st-publicat-bg: var(--surface); --st-respins-fg: #b24a3b; --st-respins-bg: var(--surface); /* ---------- Typography (rem — scales with OS / browser text size) */ --font-display: "Newsreader", Georgia, "Times New Roman", serif; --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* size (px) line-height AppTextTheme */ --fs-display-xl: 2.75rem; /* 44 (48/54) */ --lh-display-xl: 1.08; /* displayXl serif */ --fs-display-l: 2.125rem; /* 34 (38) */ --lh-display-l: 1.12; /* displayL serif */ --fs-display-m: 1.75rem; /* 28 */ --lh-display-m: 1.18; /* displayM serif */ --fs-display-s: 1.5rem; /* 24 */ --lh-display-s: 1.22; /* displayS serif */ --fs-title-l: 1.25rem; /* 20 */ --lh-title-l: 1.3; /* titleL sans 600 */ --fs-title: 1.0625rem; /* 17 */ --lh-title: 1.35; /* title sans 600 */ --fs-body: 1rem; /* 16 */ --lh-body: 1.55; /* body reading */ --fs-body-s: .875rem; /* 14 */ --lh-body-s: 1.5; /* bodyS secondary */ --fs-button: .875rem; /* 14 */ --lh-button: 1.2; /* button 600 (tabs, nav) */ --fs-label: .8125rem; /* 13 */ --lh-label: 1.25; /* label chips, field labels */ --fs-caption: .75rem; /* 12 */ --lh-caption: 1.4; /* caption meta */ --fs-label-s: .6875rem; /* 11 = floor */ --lh-label-s: 1.25; /* labelS tab bar, calendar */ --fs-eyebrow: .75rem; /* 12 UPPER */ --ls-eyebrow: .12em; --fs-input: 1rem; /* 16 — avoids iOS zoom on focus */ /* Nothing in base.css is smaller than --fs-label-s (11px). */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --ls-display: -.018em; /* serif headlines are tightened slightly */ --ls-tight: -.011em; /* sans titles */ /* ---------- Spacing (4-based) ----------------------------------- */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; --gutter: 16px; /* page side padding on mobile */ /* ---------- Radii ----------------------------------------------- Shape rule: icon buttons = circle · FAB = --r-fab (M3 16) · text buttons = --r-md (pill only via --pill) · cards = --r-lg. */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-fab: 16px; --r-lg: 22px; --r-xl: 28px; --r-pill: 999px; /* ---------- Elevation ------------------------------------------- */ --sh-0: none; --sh-1: 0 1px 2px rgba(39, 61, 54, .05), 0 1px 1px rgba(39, 61, 54, .03); /* cards at rest */ --sh-2: 0 1px 2px rgba(39, 61, 54, .05), 0 6px 20px rgba(41, 59, 48, .07); /* raised / hover */ --sh-3: 0 4px 12px rgba(29, 44, 38, .08), 0 18px 44px rgba(29, 44, 38, .13); /* popovers */ --sh-4: 0 10px 30px rgba(20, 32, 27, .14), 0 30px 80px rgba(20, 32, 27, .22); /* sheets, modals */ --sh-inset: inset 0 1px 2px rgba(39, 61, 54, .06); --sh-primary: inset 0 1px 0 rgba(255, 255, 255, .08), 0 1px 2px rgba(20, 40, 30, .18); /* filled buttons */ --sh-fab: 0 2px 4px rgba(35, 62, 50, .16), 0 6px 16px rgba(35, 62, 50, .24); /* FAB, tab-bar Add */ /* ---------- Motion ---------------------------------------------- */ --dur-1: 120ms; /* micro: press, hover */ --dur-2: 200ms; /* small: chips, toggles */ --dur-3: 320ms; /* medium: sheets, page transitions */ --dur-4: 480ms; /* large: hero reveals */ --ease-standard: cubic-bezier(.2, 0, 0, 1); /* Easing.standard */ --ease-decelerate: cubic-bezier(.05, .7, .1, 1); /* Easing.emphasizedDecelerate */ --ease-accelerate: cubic-bezier(.3, 0, .8, .15); /* Easing.emphasizedAccelerate */ --ease-spring: cubic-bezier(.34, 1.4, .64, 1); /* playful pops (check, switch) */ /* ---------- Layers ---------------------------------------------- */ --z-base: 0; --z-raised: 1; --z-sticky: 10; --z-header: 20; --z-tabbar: 30; --z-fab: 35; --z-overlay: 40; --z-sheet: 50; --z-toast: 60; --z-tooltip: 70; /* ---------- Layout & ergonomics --------------------------------- */ --touch: 44px; /* minimum touch target (Flutter: 48dp) */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --appbar-h: 56px; --tabbar-h: 64px; /* + --safe-bottom */ --sidebar-w: 256px; --panel-w: 360px; --content-max: 1180px; --reading-max: 680px; } /* ===================================================================== Dark theme — warm charcoal (olive/umber cast), never pure black. Filled primary is a MID-TONE green with cream text (calm, keeps the deep-green identity); pastel mint is only for text/lines (--primary-ink), focus and selection. The two blocks MUST stay identical (tools/check-tokens.mjs checks). ===================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #151512; --paper-2: #11110e; --surface: #1c1c18; --surface-2: #23231e; --surface-3: #2b2b25; --surface-muted: #23231e; --surface-glass: rgba(28, 28, 24, .84); --ink: #ece8de; --ink-2: #d6d3c8; --muted: #a9ab9f; --subtle: #7b7d72; --line: #30302a; --line-strong: #3d3d35; --control-border: #7d8078; --scrim: rgba(0, 0, 0, .55); --scrim-media: rgba(10, 12, 10, .58); --on-media: #ffffff; --shimmer: rgba(255, 255, 255, .05); --primary: #44775f; --primary-hover: #3f7059; --primary-press: #39664f; --on-primary: #fbf8ef; --primary-ink: #8fc2a4; --primary-soft: #203229; --primary-soft-2: #294034; --on-primary-soft: #b9dcc6; --brand-tile-bg: #315748; --brand-tile-fg: #fbf8ef; --accent: #d7ae66; --accent-ink: #e2bf80; --accent-soft: #332a1b; --hero-bg: #223026; --hero-bg-2: #26352a; --hero-line: #34453a; --hero-ink: #b8c6b6; --focus: #d9b36d; --inverse-surface: #ece8de; --on-inverse-surface: #1c1c18; --inverse-primary: #315748; --danger: #e0806f; --danger-ink: #eea090; --danger-soft: #3a211d; --on-danger: #2a0f0a; --warning: #e79a5f; --warning-ink: #f0b385; --warning-soft: #3a2517; --success: #7dbf93; --success-ink: #98d0aa; --success-soft: #1b3024; --info: #86b6d2; --info-ink: #a2c8de; --info-soft: #1a2b35; --ai: #b3a0e3; --ai-ink: #c4b5ec; --ai-soft: #2a2439; --sub-clr: #eba08f; --sub-clr-bg: #3a2420; --sub-mem: #e0ba6d; --sub-mem-bg: #342a16; --sub-dp: #98c7a7; --sub-dp-bg: #1e3026; --sub-mm: #c9a8d6; --sub-mm-bg: #2f2536; --sub-avap: #8fc8d1; --sub-avap-bg: #193133; --sub-eng: #9dbbe6; --sub-eng-bg: #1c2839; --sub-sport: #e7a57d; --sub-sport-bg: #37251a; --sub-rob: #aebacb; --sub-rob-bg: #242a33; --sub-inot: #83c9dc; --sub-inot-bg: #162f36; --sub-muz: #dca3cf; --sub-muz-bg: #36212f; --sub-sah: #b9c1ba; --sub-sah-bg: #262a27; --sub-dans: #eba1bd; --sub-dans-bg: #3a1f29; --aud-private-fg: #151512; --aud-private-bg: #ece8de; --aud-private-border: #ece8de; --aud-family-fg: #a3d4b5; --aud-family-bg: #1f3328; --aud-family-border: #35553f; --aud-shared-fg: #cdb6ef; --aud-shared-bg: #2c243b; --aud-shared-border: #4a3e63; --aud-class-fg: #a9c2e6; --aud-class-bg: transparent; --aud-class-border: #a9c2e6; --aud-school-fg: #8fd0cc; --aud-school-bg: transparent; --aud-school-border: #8fd0cc; --aud-staff-fg: #d6d3c8; --aud-staff-bg: transparent; --aud-staff-border: #d6d3c8; --st-primit-fg: #aab4be; --st-propus-fg: #b3a0e3; --st-verificat-fg: #86b6d2; --st-publicat-fg: #7dbf93; --st-respins-fg: #e0806f; --sh-1: 0 1px 2px rgba(0, 0, 0, .35); --sh-2: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .32); --sh-3: 0 6px 16px rgba(0, 0, 0, .4), 0 20px 48px rgba(0, 0, 0, .45); --sh-4: 0 12px 32px rgba(0, 0, 0, .5), 0 32px 90px rgba(0, 0, 0, .6); --sh-inset: inset 0 1px 2px rgba(0, 0, 0, .3); --sh-primary: 0 1px 2px rgba(0, 0, 0, .4); --sh-fab: 0 2px 4px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .5); } } :root[data-theme="dark"] { color-scheme: dark; --paper: #151512; --paper-2: #11110e; --surface: #1c1c18; --surface-2: #23231e; --surface-3: #2b2b25; --surface-muted: #23231e; --surface-glass: rgba(28, 28, 24, .84); --ink: #ece8de; --ink-2: #d6d3c8; --muted: #a9ab9f; --subtle: #7b7d72; --line: #30302a; --line-strong: #3d3d35; --control-border: #7d8078; --scrim: rgba(0, 0, 0, .55); --scrim-media: rgba(10, 12, 10, .58); --on-media: #ffffff; --shimmer: rgba(255, 255, 255, .05); --primary: #44775f; --primary-hover: #3f7059; --primary-press: #39664f; --on-primary: #fbf8ef; --primary-ink: #8fc2a4; --primary-soft: #203229; --primary-soft-2: #294034; --on-primary-soft: #b9dcc6; --brand-tile-bg: #315748; --brand-tile-fg: #fbf8ef; --accent: #d7ae66; --accent-ink: #e2bf80; --accent-soft: #332a1b; --hero-bg: #223026; --hero-bg-2: #26352a; --hero-line: #34453a; --hero-ink: #b8c6b6; --focus: #d9b36d; --inverse-surface: #ece8de; --on-inverse-surface: #1c1c18; --inverse-primary: #315748; --danger: #e0806f; --danger-ink: #eea090; --danger-soft: #3a211d; --on-danger: #2a0f0a; --warning: #e79a5f; --warning-ink: #f0b385; --warning-soft: #3a2517; --success: #7dbf93; --success-ink: #98d0aa; --success-soft: #1b3024; --info: #86b6d2; --info-ink: #a2c8de; --info-soft: #1a2b35; --ai: #b3a0e3; --ai-ink: #c4b5ec; --ai-soft: #2a2439; --sub-clr: #eba08f; --sub-clr-bg: #3a2420; --sub-mem: #e0ba6d; --sub-mem-bg: #342a16; --sub-dp: #98c7a7; --sub-dp-bg: #1e3026; --sub-mm: #c9a8d6; --sub-mm-bg: #2f2536; --sub-avap: #8fc8d1; --sub-avap-bg: #193133; --sub-eng: #9dbbe6; --sub-eng-bg: #1c2839; --sub-sport: #e7a57d; --sub-sport-bg: #37251a; --sub-rob: #aebacb; --sub-rob-bg: #242a33; --sub-inot: #83c9dc; --sub-inot-bg: #162f36; --sub-muz: #dca3cf; --sub-muz-bg: #36212f; --sub-sah: #b9c1ba; --sub-sah-bg: #262a27; --sub-dans: #eba1bd; --sub-dans-bg: #3a1f29; --aud-private-fg: #151512; --aud-private-bg: #ece8de; --aud-private-border: #ece8de; --aud-family-fg: #a3d4b5; --aud-family-bg: #1f3328; --aud-family-border: #35553f; --aud-shared-fg: #cdb6ef; --aud-shared-bg: #2c243b; --aud-shared-border: #4a3e63; --aud-class-fg: #a9c2e6; --aud-class-bg: transparent; --aud-class-border: #a9c2e6; --aud-school-fg: #8fd0cc; --aud-school-bg: transparent; --aud-school-border: #8fd0cc; --aud-staff-fg: #d6d3c8; --aud-staff-bg: transparent; --aud-staff-border: #d6d3c8; --st-primit-fg: #aab4be; --st-propus-fg: #b3a0e3; --st-verificat-fg: #86b6d2; --st-publicat-fg: #7dbf93; --st-respins-fg: #e0806f; --sh-1: 0 1px 2px rgba(0, 0, 0, .35); --sh-2: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .32); --sh-3: 0 6px 16px rgba(0, 0, 0, .4), 0 20px 48px rgba(0, 0, 0, .45); --sh-4: 0 12px 32px rgba(0, 0, 0, .5), 0 32px 90px rgba(0, 0, 0, .6); --sh-inset: inset 0 1px 2px rgba(0, 0, 0, .3); --sh-primary: 0 1px 2px rgba(0, 0, 0, .4); --sh-fab: 0 2px 4px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .5); } /* Larger display scale on tablet / desktop (teachers, big screens). */ @media (min-width: 1100px) { :root { --fs-display-xl: 3.375rem; --fs-display-l: 2.375rem; --gutter: 32px; } } @media (min-width: 768px) and (max-width: 1099px) { :root { --fs-display-xl: 3rem; --gutter: 24px; } }