/*
 * Brand Theme — Aykua
 * Imports generated tokens and defines semantic theme aliases.
 *
 * Architecture:
 *   Palette tokens (--color-primary-*, --color-secondary-*) are static hex values.
 *   Theme aliases (--theme-*) remap which gradation is used per mode.
 *
 * Design rule:
 *   ONLY text and icons may use strong/dark colours.
 *   Everything else — backgrounds, surfaces, buttons, cards, panels,
 *   borders, accents — must be a pale off-white tint.
 *   In dark mode: everything deep/dark, only text is light.
 */

@import "../tokens.css";

:root {
  /* ---- Light mode ---- */

  /* Page background — gray-5 from brand palette */
  --theme-bg: #f6f5f0;
  --theme-bg-foreground: var(--color-primary-dark);

  /* Subtle bg — section variety */
  --theme-bg-subtle: #efeee8;
  --theme-bg-subtle-foreground: var(--color-primary-dark);

  /* Surface — cards, buttons, panels */
  --theme-surface: #efeee8;

  /* Text — the ONLY thing that uses strong colour */
  --theme-fg: var(--color-primary-dark);
  --theme-fg-muted: var(--color-primary-DEFAULT);

  /* Interactive text colour (links, active states) — dark, for text only */
  --theme-primary: var(--color-primary-DEFAULT);
  --theme-primary-hover: var(--color-primary-semidark);
  --theme-primary-foreground: var(--color-primary-DEFAULT-foreground);
  --theme-primary-dark: var(--color-primary-dark);

  /* Secondary text colour — for text only */
  --theme-secondary: var(--color-secondary-semidark);
  --theme-secondary-hover: var(--color-secondary-dark);
  --theme-secondary-foreground: var(--color-secondary-DEFAULT-foreground);

  /* Accent surface — for feature cards etc */
  --theme-accent: #e8e7e0;

  /* Border */
  --theme-border: #d8d6ce;

  /* Focus ring */
  --theme-focus: var(--color-secondary-muted);

  /* Neumorphic shadow primitives — light mode */
  --neu-shadow-dark: rgba(174, 182, 190, 0.45);
  --neu-shadow-light: rgba(255, 255, 255, 0.8);

  /* Neumorphic elevation presets */
  --neu-raised:
    6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
  --neu-raised-sm:
    3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
  --neu-raised-lg:
    10px 10px 20px var(--neu-shadow-dark),
    -10px -10px 20px var(--neu-shadow-light);
  --neu-inset:
    inset 3px 3px 6px var(--neu-shadow-dark),
    inset -3px -3px 6px var(--neu-shadow-light);
  --neu-inset-sm:
    inset 2px 2px 4px var(--neu-shadow-dark),
    inset -2px -2px 4px var(--neu-shadow-light);
  --neu-hover:
    8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light);

  /* Typography */
  --theme-font: var(--typography-font-family-sans);
  --theme-font-heading: var(--typography-font-family-heading);
  --theme-font-mono: var(--typography-font-family-mono);
}

/* ---- Dark mode ---- */
/* Everything deep. Only text is light. */
[data-theme="dark"] {
  --theme-bg: #0c1a28;
  --theme-bg-foreground: var(--color-primary-light);

  --theme-bg-subtle: #11223a;
  --theme-bg-subtle-foreground: var(--color-primary-light);

  --theme-surface: #142840;

  /* Text — light, the only bright thing */
  --theme-fg: color-mix(
    in oklab,
    var(--color-primary-light) 85%,
    var(--color-primary-semilight)
  );
  --theme-fg-muted: color-mix(
    in oklab,
    var(--color-primary-semilight) 40%,
    #0c1a28
  );

  /* Interactive text colour — muted, for text only */
  --theme-primary: color-mix(
    in oklab,
    var(--color-primary-semilight) 60%,
    #0c1a28
  );
  --theme-primary-hover: color-mix(
    in oklab,
    var(--color-primary-semilight) 75%,
    #0c1a28
  );
  --theme-primary-foreground: var(--color-primary-light);

  --theme-secondary: color-mix(
    in oklab,
    var(--color-secondary-muted) 35%,
    #0c1a28
  );
  --theme-secondary-hover: color-mix(
    in oklab,
    var(--color-secondary-muted) 50%,
    #0c1a28
  );
  --theme-secondary-foreground: var(--color-primary-light);

  --theme-accent: #0f1f33;
  --theme-border: rgba(255, 255, 255, 0.06);
  --theme-focus: color-mix(in oklab, var(--color-secondary-muted) 30%, #0c1a28);

  /* Neumorphic shadow primitives — dark mode */
  --neu-shadow-dark: rgba(0, 0, 0, 0.5);
  --neu-shadow-light: rgba(40, 65, 95, 0.35);

  --neu-raised:
    6px 6px 12px var(--neu-shadow-dark), -6px -6px 12px var(--neu-shadow-light);
  --neu-raised-sm:
    3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light);
  --neu-raised-lg:
    10px 10px 20px var(--neu-shadow-dark),
    -10px -10px 20px var(--neu-shadow-light);
  --neu-inset:
    inset 3px 3px 6px var(--neu-shadow-dark),
    inset -3px -3px 6px var(--neu-shadow-light);
  --neu-inset-sm:
    inset 2px 2px 4px var(--neu-shadow-dark),
    inset -2px -2px 4px var(--neu-shadow-light);
  --neu-hover:
    8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light);

  color-scheme: dark;
}

body {
  font-family: var(--theme-font);
  color: var(--theme-fg);
  background: var(--theme-bg);
  line-height: var(--typography-line-height-body);
  margin: 0;
  padding: 0;
}

a {
  color: var(--theme-primary);
  text-decoration: none;
}

a:hover {
  color: var(--theme-primary-hover);
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--theme-font-heading);
}