/**
 * light.css — Light theme token values (default) + UpDigital brand font.
 * Every component in styles.css reads colours exclusively through these
 * --color-* variables, so dark.css only needs to override the same names
 * under an `html[data-theme="dark"]` selector — see dark.css.
 */

@font-face {
  font-family: "Google Sans";
  src: url("../fonts/GoogleSans-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces */
  --color-bg: #F7F7F9;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-border: #EAEAEE;
  --color-border-strong: #DCDCE4;

  /* Text */
  --color-text-primary: #14141A;
  --color-text-secondary: #5C5C6B;
  --color-text-tertiary: #91919E;

  /* Brand / accent, plus the one text colour that has to match it
     (--color-text-on-accent) -- all three are overridden inline as soon as
     modules/theme.js runs (a client's own accent colour once one loads,
     paired with white text -- see theme.js). What's left here is what
     actually shows on the "shared" screens that never run applyTheme() at
     all (homepage sign-in, invite/reset-password, no-client-selected,
     access-denied) -- since those have no client to brand around, they
     should look like Up Digital's own product rather than an arbitrary
     placeholder colour, so the default here is Up Digital's real brand
     yellow (same value as BRAND_YELLOW in theme.js), paired with dark text
     for contrast against it. */
  --color-accent: #FFBE0C;
  --color-accent-text: #916A00; /* accent as text; applyTheme() overrides per client, this is the fallback for the shared screens */
  --color-accent-soft: rgba(255, 190, 12, 0.16);
  --color-text-on-accent: #14141A;

  /* Semantic */
  --color-positive: #17B26A;
  --color-positive-soft: #E7F8EF;
  --color-negative: #F04438;
  --color-negative-soft: #FDECEA;
  --color-warning: #B54708;
  --color-warning-soft: #FEF0C7;
  --color-neutral: #91919E;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(20, 20, 26, 0.04);
  --shadow-md: 0 4px 16px rgba(20, 20, 26, 0.06);
  --shadow-lg: 0 12px 32px rgba(20, 20, 26, 0.08);
}