/*
 * SPEED IEP brand layer for Twenty (Direction A: Evergreen & Ochre, accessible revision 2026-10-24).
 * Repoints Twenty's light-theme CSS variables (--t-*). "html.light" outranks Twenty's own ".light"
 * blocks, including the display-p3 ones inside @supports, so these win without !important.
 * Tag colours (record option chips) and danger red are left as Twenty ships them.
 */
html.light {
  /* Surfaces: page/sidebar = paper, panels/cards/inputs = surface */
  --t-background-secondary: #F5F2EC;
  --t-background-primary: #FCFBF8;
  --t-background-tertiary: #EDE8DF;
  --t-background-quaternary: #E5DFD3;
  --t-background-transparent-primary: #FCFBF880;
  --t-background-transparent-secondary: #FCFBF866;
  --t-background-transparent-lighter: #1F3A3D05;
  --t-background-transparent-light: #1F3A3D0A;
  --t-background-transparent-medium: #1F3A3D14;
  --t-background-transparent-strong: #1F3A3D29;
  --t-background-transparent-blue: #23595514;
  --t-background-transparent-success: #285A2D19;
  --t-background-transparent-orange: #E3A33B29;

  /* Primary buttons ("Continue", "+ Create" on dark) and inverted surfaces */
  --t-background-primary-inverted: #235955;
  --t-background-primary-inverted-hover: #1C4845;
  --t-background-inverted-primary: #1F3A3D;
  --t-background-inverted-secondary: #235955;
  --t-border-color-inverted: #235955;
  --t-border-color-secondary-inverted: #1C4845;
  --t-background-radial-gradient: radial-gradient(50% 62.62% at 50% 0%, #2F6B67 0%, #235955 100%);
  --t-background-radial-gradient-hover: radial-gradient(76.32% 95.59% at 50% 0%, #235955 0%, #1C4845 100%);

  /* Lines */
  --t-border-color-light: #DDD6C9;
  --t-border-color-medium: #8A7F6C;
  --t-border-color-strong: #8A7F6C;
  --t-border-color-blue: #8FBBB5;
  --t-border-color-transparent-strong: #1F3A3D12;

  /* Text */
  --t-font-color-primary: #1F3A3D;
  --t-font-color-secondary: #3F5254;
  /* tertiary: 4.51:1 on paper, 4.87:1 on surface. light (placeholders): 3.18:1 / 3.43:1 */
  --t-font-color-tertiary: #627271;
  --t-font-color-light: #7C8B89;
  --t-font-color-extra-light: #C3CBC8;
  --t-font-color-inverted: #FCFBF8;
  --t-font-color-on-accent: #FCFBF8;

  /* Accent (Twenty's blue) -> evergreen scale, primary #235955 at step 9 */
  --t-color-blue: #235955;
  --t-color-blue1: #FBFCFB;  --t-accent-accent1: #FBFCFB;
  --t-color-blue2: #F3F8F7;  --t-accent-accent2: #F3F8F7;
  --t-color-blue3: #E6F1EF;  --t-accent-accent3: #E6F1EF;
  --t-color-blue4: #D6E8E5;  --t-accent-accent4: #D6E8E5;
  --t-color-blue5: #C3DDD9;  --t-accent-accent5: #C3DDD9;
  --t-color-blue6: #ACCFCA;  --t-accent-accent6: #ACCFCA;
  --t-color-blue7: #8FBBB5;  --t-accent-accent7: #8FBBB5;
  --t-color-blue8: #6AA19A;  --t-accent-accent8: #6AA19A;
  --t-color-blue9: #235955;  --t-accent-accent9: #235955;
  --t-color-blue10: #1C4845; --t-accent-accent10: #1C4845;
  --t-color-blue11: #235955; --t-accent-accent11: #235955;
  --t-color-blue12: #1F3A3D; --t-accent-accent12: #1F3A3D;
  --t-accent-accent3570: #6AA19A;
  --t-accent-accent4060: #6AA19A;
  --t-accent-primary: #C3DDD9;
  --t-accent-secondary: #C3DDD9;
  --t-accent-tertiary: #E6F1EF;
  --t-accent-quaternary: #F3F8F7;
  --t-buttons-secondary-text-color: #235955;

  /* Status colours */
  --t-color-green: #285A2D;
  --t-color-orange: #7A440C;
  --t-color-yellow: #E3A33B;

  /* index.html paints <html>/<body> from this before the app loads */
  --theme-light-background-secondary: #F5F2EC;
}

@media (prefers-color-scheme: light) {
  html.light,
  html.light body {
    background-color: #F5F2EC;
  }
}

/* Headings in Archivo (brand display face); body text stays Twenty's Inter for readability. */
html.light h1,
html.light h2 {
  font-family: 'Archivo', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/*
 * Sign-in / auth logo: show the wide SPEED IEP lockup instead of the small square icon, and drop the
 * workspace-logo badge Twenty overlays on its corner. Twenty's auth Logo renders
 * <div container><a><div style="background-image:url(.../android-launchericon-192-192.png)"></a><div badge></div></div>;
 * the inline background-image is the stable hook (class names are hashed per build).
 */
div:has(> a > div[style*="android-launchericon-192-192"]) {
  width: min(280px, 80vw);
  height: auto;
  aspect-ratio: 1100 / 600;
  margin-top: 8px;
  /* Twenty's title block adds its own top spacing; this nets ~40px between the lockup and "Welcome". */
  margin-bottom: -24px;
}
div:has(> a > div[style*="android-launchericon-192-192"]) > a {
  display: block;
  height: 100%;
}
div[style*="android-launchericon-192-192"] {
  background-image: url(/speediep/speediep-lockup-light.svg) !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
div:has(> a > div[style*="android-launchericon-192-192"]) > div {
  display: none;
}

/* Links inside rich text (notes, task bodies) are underlined so they don't rely on colour alone (WCAG 1.4.1). */
html.light .bn-editor a,
html.light .bn-inline-content a {
  text-decoration: underline;
  text-underline-offset: 2px;
}