/* EurekaLogic — Color System
   Strategic Tarot Insight. Dark-only, everything on near-black ink.
   Values lifted verbatim from the shipped A5 flyer (client-approved). */

:root {
  /* ===================== Brand tokens (as shipped) ===================== */
  /* Inks */
  --el-ink:      #0B0D10; /* primary background / deepest ink */
  --el-ink-2:    #0a141c; /* mid radial background stop */
  --el-ink-teal: #0E2A3A; /* top radial background stop (cool glow) */

  /* Golds / warm metal */
  --el-gold:    #FFC857; /* primary accent — wordmark, headings, key strokes */
  --el-gold-hi: #FFEFC4; /* wordmark gradient highlight (top) */
  --el-amber:   #E0922F; /* wordmark gradient mid */
  --el-rust:    #C46A2D; /* wordmark base · dividers · secondary strokes */

  /* Signature cyan + emblem accent */
  --el-teal:    #00E0D1; /* tagline, iconography, QR frame */
  --el-violet:  #7B2CBF; /* occasional card / emblem accent */

  /* Text */
  --el-text:         #E7EEF0; /* bright headings on ink */
  --el-text-2:       #c2d3d8; /* body copy (light blue-grey) */
  --el-text-3:       #9fb4b9; /* muted captions / taglines */
  --el-text-heading: #EAF6F4; /* card / label headings */
  --el-text-dim:     #c2d2d7; /* secondary list copy */

  /* ===================== Extended ramps (for UI) ===================== */
  --teal-300: #66f0e7;
  --teal-400: #2ce9da;
  --teal-500: #00e0d1; /* = --el-teal */
  --teal-600: #00b3a8;
  --teal-700: #04867f;

  --gold-300: #ffefc4; /* = --el-gold-hi */
  --gold-400: #ffc857; /* = --el-gold */
  --gold-500: #e0922f; /* = --el-amber */
  --gold-600: #c46a2d; /* = --el-rust */
  --gold-700: #9e5220;

  --rust-400: #d98a4c;
  --rust-500: #c46a2d; /* = --el-rust */
  --rust-600: #9e5220;

  --violet-400: #9a5bd8;
  --violet-500: #7b2cbf; /* = --el-violet */
  --violet-600: #5f1f97;

  --ink-950: #070a0d;
  --ink-900: #0b0d10; /* = --el-ink */
  --ink-850: #0a141c; /* = --el-ink-2 */
  --ink-800: #0e2029;
  --ink-700: #12303c;
  --ink-600: #1c4152;
  --ink-500: #2c5a6c;
  --slate-400: #6a8791;
  --slate-300: #9fb4b9; /* = --el-text-3 */
  --slate-200: #c2d3d8; /* = --el-text-2 */
  --mist-100: #dbe8ea;
  --mist-50:  #e7eef0; /* = --el-text */
  --white:    #ffffff;

  /* Semantic hues */
  --green-500: #2fbf71;
  --amber-500: #e0922f;
  --red-500:   #e5484d;
  --red-600:   #c93b40;

  /* ===================== Semantic aliases (dark, default) ===================== */
  --bg-page:     var(--el-ink);
  --bg-surface:  #101820;
  --bg-elevated: #142530;
  --bg-inset:    var(--ink-950);
  --bg-overlay:  color-mix(in oklab, #000 68%, transparent);

  --text-primary:   var(--el-text);
  --text-secondary: var(--el-text-2);
  --text-muted:     var(--el-text-3);
  --text-heading:   var(--el-text-heading);
  --text-inverse:   var(--el-ink);
  --text-on-accent: var(--el-ink);

  --border-subtle:  color-mix(in oklab, var(--slate-400) 20%, transparent);
  --border-default: color-mix(in oklab, var(--slate-400) 34%, transparent);
  --border-strong:  var(--ink-500);
  --border-keyline: color-mix(in oklab, var(--el-gold) 18%, transparent); /* the inset gold page frame */

  /* Accents — gold is primary in this brand; teal is the signal/cyan */
  --accent:            var(--el-gold);
  --accent-hover:      var(--el-gold-hi);
  --accent-press:      var(--el-amber);
  --accent-quiet:      color-mix(in oklab, var(--el-gold) 14%, transparent);
  --accent-teal:       var(--el-teal);
  --accent-teal-quiet: color-mix(in oklab, var(--el-teal) 14%, transparent);
  --accent-rust:       var(--el-rust);
  --accent-violet:     var(--el-violet);

  --success:       var(--green-500);
  --success-quiet: color-mix(in oklab, var(--green-500) 16%, transparent);
  --warning:       var(--el-amber);
  --warning-quiet: color-mix(in oklab, var(--el-amber) 18%, transparent);
  --danger:        var(--red-500);
  --danger-quiet:  color-mix(in oklab, var(--red-500) 16%, transparent);
  --info:          var(--el-teal);

  --focus-ring: color-mix(in oklab, var(--el-teal) 52%, transparent);

  /* ===================== Signature gradients ===================== */
  /* Radial "spotlight from top" — the page base everywhere. */
  --grad-orbit: radial-gradient(130% 55% at 50% 2%, var(--el-ink-teal) 0%, var(--el-ink-2) 38%, var(--el-ink) 100%); /* @kind other */
  /* Wordmark gold gradient (vertical). Apply with background-clip:text. */
  --grad-wordmark: linear-gradient(180deg, var(--el-gold-hi) 0%, var(--el-gold) 42%, var(--el-amber) 74%, var(--el-rust) 100%);
  /* Tarot-card face gradient. */
  --grad-card-face: linear-gradient(160deg, #133c4f 0%, #0c2230 55%, #091017 100%); /* @kind other */
  --grad-metal: linear-gradient(135deg, var(--el-gold) 0%, var(--el-rust) 100%);
  /* Divider rule. */
  --rule-rust: linear-gradient(90deg, rgba(196,106,45,0.7), transparent); /* @kind other */
}

/* Light theme is intentionally NOT shipped — EurekaLogic is dark-only.
   A minimal fallback exists only so light-mode consumers don't break. */
[data-theme="light"] {
  --bg-page: #f4f7f8; --bg-surface: #fff; --bg-elevated: #fff; --bg-inset: #eef3f4;
  --text-primary: #101820; --text-secondary: #35474f; --text-muted: #64777f;
  --border-subtle: rgba(16,24,32,.12); --border-default: rgba(16,24,32,.2);
  --accent: var(--el-rust); --accent-hover: var(--el-amber); --text-on-accent: #fff;
  --grad-orbit: radial-gradient(130% 55% at 50% 2%, #fff 0%, #eef3f4 70%, #dbe8ea 100%); /* @kind other */
}