/*
 * Synthonyx Suite — design tokens (canonical source of truth).
 * Bound to the Synthonyx Group identity (see docs/BRAND_BRIEF.md §4.2).
 * Every per-app stylesheet in this directory imports these variables; never hardcode
 * a hex elsewhere. tokens.yml mirrors these values for non-CSS config (Ansible).
 */

:root {
  /* Brand / lineage */
  --syn-purple:        #4a148c; /* Synthonyx primary — brand, logo, headings */
  --syn-purple-action: #5e1ba6; /* buttons/links on light (AA with white text) */
  --syn-purple-hover:  #4a148c; /* hover/pressed */
  --syn-purple-subtle: #f3ecf9; /* tints, selected rows, brand washes (light) */

  /* Accent / links */
  --syn-teal:          #006064; /* accent, links on light */
  --syn-teal-on-dark:  #4db6ac; /* accent, links on dark surfaces */

  /* Highlight (rare) — dark text only */
  --syn-amber:         #ff6f00;

  /* Light-mode neutrals */
  --syn-ink:           #1a1a1a; /* primary text */
  --syn-slate:         #455a64; /* secondary text */
  --syn-silver:        #90a4ae; /* tertiary / disabled */
  --syn-canvas:        #fdfdfd; /* page background */
  --syn-surface:       #ffffff; /* cards, panels */
  --syn-hairline:      #dddddd; /* borders, dividers */

  /* Dark-mode palette (active) */
  --syn-dark-bg:       #230036;
  --syn-dark-card:     #2c004a;
  --syn-dark-border:   #3a2b5a;
  --syn-dark-text:     #f5f5f5;
  --syn-purple-on-dark:#c9a9f0;

  /* Typography */
  --syn-font-heading: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --syn-font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --syn-font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Geometry */
  --syn-radius-card:   8px;
  --syn-radius-control:6px;
}

/*
 * Semantic aliases that flip with the active surface. Apps/snippets that support a dark
 * mode can scope `[data-theme="dark"]` (or the app's own dark selector) to re-point these.
 */
:root {
  --syn-bg:      var(--syn-canvas);
  --syn-fg:      var(--syn-ink);
  --syn-card:    var(--syn-surface);
  --syn-border:  var(--syn-hairline);
  --syn-link:    var(--syn-teal);
  --syn-accent:  var(--syn-purple-action);
}

[data-theme="dark"], .dark, .theme-dark {
  --syn-bg:      var(--syn-dark-bg);
  --syn-fg:      var(--syn-dark-text);
  --syn-card:    var(--syn-dark-card);
  --syn-border:  var(--syn-dark-border);
  --syn-link:    var(--syn-teal-on-dark);
  --syn-accent:  var(--syn-purple-on-dark);
}