/* ===================================================================
   Tembi Labs brand override — remaps the arbio design tokens to the
   Tembi palette. Loaded AFTER main CSS so :root redefinitions win.
   Palette:  DARK #222228 · Creme #F1E6E9 · Purple(CTA) #4C2EE4
             Pastelle Purple #DCC5F0 · Light Blue #C5E8FA
   =================================================================== */
:root {
  /* --- accent: arbio lime (#ddf299) -> Tembi purple --- */
  --color-brand: #4C2EE4;
  --tembi-purple: #4C2EE4;
  --tembi-pastelle: #DCC5F0;
  --tembi-lightblue: #C5E8FA;
  --tembi-creme: #F1E6E9;
  --tembi-dark: #222228;

  /* --- dark scale -> #222228 family --- */
  --color-dark-100: #222228;
  --color-dark-80:  #2b2b33;
  --color-dark-60:  #34343d;
  --color-dark-40:  #45454f;
  --color-dark-20:  #55555f;
  --color-dark-10:  #5d5d67;
  --color-dark-100-alpha-0:  #22222800;
  --color-dark-100-alpha-10: #2222281a;

  /* --- light scale -> white base + Creme / Pastelle surfaces --- */
  --color-light-100: #ffffff;
  --color-light-80:  #F1E6E9;   /* Creme  (secondary surfaces) */
  --color-light-60:  #DCC5F0;   /* Pastelle (secondary buttons) */
  --color-light-20:  #6b6b72;
  --color-light-100-alpha-0:  #ffffff00;
  --color-light-100-alpha-10: #ffffff1a;

  /* --- Tembi wants purple CTAs (arbio used dark) --- */
  --background-button-primary: #4C2EE4;
  --background-highlight: #DCC5F0;
}
/* keep primary buttons legible on purple */
:root {
  --text-inverse: #ffffff;
}
/* highlight pills: dark ink on pastelle */
[class*="highlight"] { color: var(--tembi-dark); }
/* selection + focus in brand purple */
::selection { background: #4C2EE4; color: #fff; }
:focus-visible { outline-color: #4C2EE4 !important; }

/* ===== Force LIGHT theme (mockups are light/creme). Neutralise the clock-based .dark class. ===== */
.dark {
  --background: var(--color-light-100);
  --background-secondary: var(--color-light-80);
  --background-foreground: var(--color-light-80);
  --background-inverse: var(--color-dark-100);
  --background-button-primary: #4C2EE4;
  --background-button-secondary: var(--color-light-60);
  --background-thumbnail: var(--color-dark-10);
  --background-icon: var(--color-light-100);
  --background-hover-on-dark: var(--color-dark-100-alpha-10);
  --background-hover-on-light: var(--color-dark-100-alpha-10);
  --text-default: var(--color-dark-100);
  --text-inverse: #ffffff;
  --text-disabled: var(--color-dark-100-alpha-10);
  --divider: var(--color-dark-100-alpha-10);
  --divider-transparent: var(--color-dark-100-alpha-0);
}

/* ===== Prevent horizontal page scroll from marquee (voicesRow) overflow.
   overflow-x: clip clips horizontally WITHOUT breaking position:sticky / ScrollTrigger pins. ===== */
html { overflow-x: clip; }