@layer normalize, base, components, utilities;

@layer base {
  :root {
    color-scheme: light;
    color: var(--color-ink);
    background: var(--color-background);
    --color-background: #fafaf6;
    --color-surface: #ffffff;
    --color-surface-soft: #eff2e9;
    --color-ink: #172c25;
    --color-muted: #526159;
    --color-line: #d6ded2;
    --color-accent: #416c35;
    --color-accent-hover: #2c4e24;
    --color-on-accent: #ffffff;
    --color-accent-light: #d9eeae;
    --color-dark: #18372c;
    --color-on-dark: #f5f8ee;
    --color-muted-dark: #c2d1c8;
    --color-line-dark: #456052;
    --color-focus: #675206;
    --color-error: #962c2c;
    --color-error-background: #fff1ed;
    --color-success-background: #eaf4df;
    --color-transparent: transparent;
    --color-selection-text: #172c25;
    --color-control-light: #ffffff;
    --color-menu-hover: #2c4e24;
    --studio-ink: #111312;
    --studio-muted: #59615e;
    --studio-tint: #c6d9d8;
    --studio-soft: #f1f2ee;
    --studio-line: #d2d7d4;
    --studio-backdrop: #111312e8;
    --studio-title-background: var(--color-transparent);
    --playful-ink: #171916;
    --playful-cream: #fffdf3;
    --playful-pink: #f5a9cb;
    --playful-lime: #dcfa71;
    --playful-red: #c52c27;
    --playful-focus: #7850e8;
    --playful-line: #6a6c62;
    --playful-shadow: #00000033;
    --playful-backdrop: #10120ff2;
    --playful-shade-top: #101a1499;
    --playful-shade-middle: #101a1459;
    --playful-shade-bottom: #101a14b3;
    --playful-background: var(--playful-cream);
    --playful-text: var(--playful-ink);
    --playful-heading-accent: #9b315e;
    --playful-intro-background: var(--playful-pink);
    --playful-intro-text: var(--playful-ink);
    --playful-outro-background: var(--playful-lime);
    --playful-outro-text: var(--playful-ink);
    --endless-paper: #f4f2e9;
    --endless-ink: #173f38;
    --endless-muted: #53675f;
    --endless-line: #bcc8ba;
    --endless-lime: #d7ed91;
    --endless-dark: #133b33;
    --endless-on-dark: #f4f2e9;
    --endless-shade: #133b3370;
    --endless-on-lime: #173f38;
    --space-section: clamp(3.5rem, 7vw, 6.5rem);
    --radius: 0.35rem;
    --width-content: 78rem;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: dark;
      --color-background: #121b17;
      --color-surface: #1b2821;
      --color-surface-soft: #243229;
      --color-ink: #eef3e9;
      --color-muted: #bac9bc;
      --color-line: #56695a;
      --color-accent: #b8d98a;
      --color-accent-hover: #d9eeae;
      --color-on-accent: #172c25;
      --color-focus: #e9d57c;
      --color-error: #ffb5ac;
      --color-error-background: #3b2323;
      --color-success-background: #243b27;
      --studio-ink: #f0f3ed;
      --studio-muted: #bac8c1;
      --studio-tint: #29423e;
      --studio-soft: #21312a;
      --studio-line: #596e62;
      --studio-title-background: var(--color-surface);
      --playful-background: #111411;
      --playful-text: #f3f4e9;
      --playful-heading-accent: var(--playful-pink);
      --playful-intro-background: #392631;
      --playful-intro-text: #fffdf3;
      --playful-outro-background: #26331c;
      --playful-outro-text: #fffdf3;
      --playful-focus: #b5a0ff;
      --endless-paper: #13231e;
      --endless-ink: #edf3e6;
      --endless-muted: #b9ccbd;
      --endless-line: #566e5d;
    }
  }
}