/*
 * Daeluria: the brand both sites wear, Haven (haven.daeluria.cloud) and the front page (daeluria.cloud).
 *
 * The one place a brand colour is written. Everything else names a role from here, or, in Haven, a role in
 * tokens.css built on these, so moving the call to action from ember to another colour is one line below.
 * Plain custom properties with no imports, fonts or anything from another origin, so the static front page can
 * serve this file as it is.
 *
 * The drama, the angelic and infernal art and the gradients, belongs to identity, splash screens and hero areas.
 * The everyday interface stays on the dark neutrals, with pearl text, restrained gold, and ember for the action.
 */
:root {
  /* The palette */
  --daeluria-obsidian: #0c0b0f; /* main background */
  --daeluria-shadow: #1b1920; /* sunken areas */
  --daeluria-graphite: #29282e; /* cards and panels */
  --daeluria-smoke: #3b333b; /* dividers and borders */
  --daeluria-pearl: #f3f0ed; /* primary text */
  --daeluria-ash: #b5adb5; /* secondary text */
  --daeluria-gold: #d6ad79; /* celestial: brand accents */
  --daeluria-ivory: #f4e4cc; /* celestial: light and highlights */
  --daeluria-ember: #f0643b; /* infernal: primary actions */
  --daeluria-infernal: #ae3427; /* infernal: dark-side accents */
  --daeluria-burgundy: #532337; /* Our Space: intimate sections */
  --daeluria-plum: #422c4c; /* Our Space: secondary accents */
  --daeluria-rose: #e8a7b0; /* Messages and Our Space: the soft accent on burgundy glass */
  --daeluria-white: #ffffff; /* only for mixing the light theme */

  /* Gradients: identity, splash and hero areas only */
  --brand-gradient-celestial: linear-gradient(135deg, var(--daeluria-ivory), var(--daeluria-gold));
  --brand-gradient-infernal: linear-gradient(135deg, var(--daeluria-infernal), var(--daeluria-ember));
  --brand-gradient-duality: linear-gradient(
    90deg,
    var(--daeluria-burgundy) 0%,
    var(--daeluria-infernal) 35%,
    var(--daeluria-gold) 70%,
    var(--daeluria-ivory) 100%
  );

  /*
   * The action button both sites draw: the action colour lit from above, deepening toward its strong shade, with a
   * warm shine along the top edge. Built from the roles below, so it follows whatever --brand-action is.
   */
  --brand-action-top: color-mix(in srgb, var(--brand-action) 88%, var(--daeluria-white));
  --brand-action-bottom: color-mix(in srgb, var(--brand-action) 85%, var(--brand-action-strong));
  --brand-action-shine: color-mix(in srgb, var(--brand-action) 30%, var(--daeluria-white));

  /* Type. Each site loads its own font files under these family names. */
  --brand-font-sans: 'Plus Jakarta Sans Variable', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --brand-font-serif: 'Cormorant Garamond', Garamond, 'Palatino Linotype', Georgia, serif;
  --brand-font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
}

/* Roles, dark: Haven's default and the front page's only theme. */
:root,
:root[data-theme='dark'] {
  --brand-bg: var(--daeluria-obsidian);
  --brand-bg-sunken: var(--daeluria-shadow);
  --brand-surface: var(--daeluria-graphite);
  --brand-border: var(--daeluria-smoke);
  --brand-text: var(--daeluria-pearl);
  --brand-text-muted: var(--daeluria-ash);
  --brand-accent: var(--daeluria-gold); /* restrained: marks, icons, rules, selection */
  --brand-highlight: var(--daeluria-ivory);
  --brand-action: var(--daeluria-ember); /* the call to action */
  --brand-action-strong: var(--daeluria-infernal);
  --brand-action-text: var(--daeluria-obsidian); /* dark text on the action, for contrast */
  --brand-intimate: var(--daeluria-burgundy);
  --brand-intimate-alt: var(--daeluria-plum);
}

/* Roles, light: Haven's light theme. A pearl ground with obsidian text; the action keeps its colour and dark text. */
:root[data-theme='light'] {
  --brand-bg: var(--daeluria-pearl);
  --brand-bg-sunken: color-mix(in srgb, var(--daeluria-pearl) 85%, var(--daeluria-ash));
  --brand-surface: color-mix(in srgb, var(--daeluria-pearl) 35%, var(--daeluria-white));
  --brand-border: color-mix(in srgb, var(--daeluria-ash) 50%, var(--daeluria-pearl));
  --brand-text: var(--daeluria-obsidian);
  --brand-text-muted: color-mix(in srgb, var(--daeluria-obsidian) 72%, var(--daeluria-ash));
  --brand-accent: color-mix(in srgb, var(--daeluria-gold) 62%, var(--daeluria-obsidian));
  --brand-highlight: var(--daeluria-ivory);
  --brand-action: var(--daeluria-ember);
  --brand-action-strong: var(--daeluria-infernal);
  --brand-action-text: var(--daeluria-obsidian);
  --brand-intimate: var(--daeluria-burgundy);
  --brand-intimate-alt: var(--daeluria-plum);
}