/*
 * 100 Tasks AI — Light theme
 * Cream/white surfaces, dark text, brand orange as the focal accent.
 * Matches the feel of onehundredtasksai.com.
 *
 * Usage: import AFTER tokens-core.css
 *   <link rel="stylesheet" href="../brand/tokens-core.css">
 *   <link rel="stylesheet" href="../brand/theme-light.css">
 */

:root {
  /* Surfaces
   * --bg-base is the canonical "page background" — white + the two-layer
   * brand gradient that the live marketing site uses (see
   * src/components/shared/backgrounds/brand-gradient-background.tsx).
   * Use the `background:` shorthand to apply it, not `background-color:`.
   */
  --bg-base:
    radial-gradient(
      ellipse 75% 60% at 50% 45%,
      color-mix(in oklab, var(--color-brand) 42%, transparent) 0%,
      color-mix(in oklab, var(--color-brand) 22%, transparent) 35%,
      transparent 80%
    ),
    linear-gradient(
      135deg,
      color-mix(in oklab, var(--color-brand) 22%, transparent) 0%,
      color-mix(in oklab, var(--color-brand) 12%, transparent) 30%,
      color-mix(in oklab, var(--color-brand) 10%, transparent) 60%,
      color-mix(in oklab, var(--color-brand) 18%, transparent) 100%
    ),
    #ffffff;

  /* Softer page background for posters. Flat white (no gradient) so dense info-graphic
     content reads cleanly. Cards sit on top in a paler gray. Apply via `background:`. */
  --bg-base-soft: #ffffff;

  --bg-flat: #ffffff;           /* flat white — also used for small chips/dots floating on top of a --bg-surface card */
  --bg-surface: #f7f8fa;        /* card / panel surface — paler gray, lifts off the white page */
  --bg-elevated: #ffffff;       /* elevated card with shadow */
  --bg-muted: #eef0f4;          /* cool-neutral inset / divider. Was a warm cream (#f4efe6) when the page used the cream gradient; flipped to cool gray so it doesn't read as pink/red against the flat-white page on cool-stage (Setup blue / Scale green) posters. Launch posters still get their warm identity from the stage color and the red task-number badge, not from this token. */

  /* Text */
  --text-primary: hsl(0, 0%, 7%);
  --text-secondary: hsl(0, 0%, 27%);
  --text-muted: hsl(0, 0%, 50%);
  --text-on-brand: #ffffff;     /* text sitting on the brand orange */

  /* Borders */
  --border-subtle: hsl(0, 0%, 88%);
  --border-strong: hsl(0, 0%, 70%);

  /* Effects */
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.06);
  --shadow-elevated: 0 30px 80px rgba(0, 0, 0, 0.12);
  --glow-brand: 0 0 60px rgba(232, 81, 58, 0.25);

  /* Default logo for sub-comps that fall back via JS — projects override via data-variable-values */
  --logo-default: "assets/brand/logo-black.png";
}