/* Kodine marketing theme — canonical palette for every public page.
   The landing page (data-page="kodine") is the design reference; this file
   re-declares its tokens for all marketing pages. Imported AFTER each page's
   own stylesheet, so at equal specificity these declarations win. */

[data-page="kodine"],
[data-page="pricing"],
[data-page="download"],
[data-page="models"],
[data-page="aura"],
[data-page="enterprise"],
[data-page="changelog"],
[data-page="legal"],
[data-page="go"] {
  /* Kodine light theme — warm Mist paper */
  --color-background: #f4f7f8;
  --color-background-weak: #ffffff;
  --color-background-weak-hover: #eef6f5;
  --color-background-strong: #0f766e;
  --color-background-strong-hover: #0d6a62;
  --color-background-interactive: rgba(45, 212, 191, 0.45);
  --color-background-interactive-weaker: #e9f6f4;

  --color-text: #3b4750;
  --color-text-weak: #55606a;
  --color-text-weaker: #8a969e;
  --color-text-strong: #10181f;
  --color-text-inverted: #ffffff;

  --color-border: #d5dfe3;
  --color-border-weak: #e2eaec;

  --color-icon: #0f766e;
  --color-accent: #0f766e;
  --color-accent-bright: #0d9488;

  /* Fixed "Night" surface used for code/install cards in both themes */
  --color-night: #0b0f14;
  --color-night-raised: #101720;
  --color-night-border: #22303c;
  --color-night-text: #b9c6cd;
  --color-night-text-weak: #5a6b76;
  --color-night-text-strong: #edf3f5;
  --color-teal: #2dd4bf;
}

@media (prefers-color-scheme: dark) {
  [data-page="kodine"],
  [data-page="pricing"],
  [data-page="download"],
  [data-page="models"],
  [data-page="aura"],
  [data-page="enterprise"],
  [data-page="changelog"],
  [data-page="legal"],
  [data-page="go"] {
    /* Kodine dark theme — Night ink with a teal cast */
    --color-background: #0b0f14;
    --color-background-weak: #101720;
    --color-background-weak-hover: #16202b;
    --color-background-strong: #2dd4bf;
    --color-background-strong-hover: #5fe3d0;
    --color-background-interactive: rgba(45, 212, 191, 0.3);
    --color-background-interactive-weaker: #0d1b1f;

    --color-text: #b9c6cd;
    --color-text-weak: #8496a1;
    --color-text-weaker: #5a6b76;
    --color-text-strong: #edf3f5;
    --color-text-inverted: #052e29;

    --color-border: #24313d;
    --color-border-weak: #1b2630;

    --color-icon: #2dd4bf;
    --color-accent: #2dd4bf;
    --color-accent-bright: #5fe3d0;
  }
}

/* Auth pages (login/register) use a smaller token set — map it onto the
   same Kodine palette and give the submit action the teal accent. */
[data-page="auth-form"] {
  --color-text: #10181f;
  --color-text-secondary: #55606a;
  --color-text-dimmed: #8a969e;
  --color-text-inverted: #ffffff;
  --color-border: #d5dfe3;
  --color-accent: #0f766e;
  --color-accent-bright: #0d9488;
  background: #f4f7f8;
}

@media (prefers-color-scheme: dark) {
  [data-page="auth-form"] {
    --color-text: #edf3f5;
    --color-text-secondary: #b9c6cd;
    --color-text-dimmed: #5a6b76;
    --color-text-inverted: #052e29;
    --color-border: #24313d;
    --color-accent: #2dd4bf;
    --color-accent-bright: #5fe3d0;
    background: #0b0f14;
  }
}

[data-page="auth-form"] [data-slot="submit"] {
  background: var(--color-accent);
  color: var(--color-text-inverted);
}

[data-page="auth-form"] [data-slot="submit"]:hover {
  background: var(--color-accent-bright);
}