/* ============================================================================
   Vamoose's Housing Decor Guide (HDG / HDGR) — Colors & Type
   ----------------------------------------------------------------------------
   A World of Warcraft addon. The chrome is a dark, dense data UI whose entire
   palette is driven by a "scheme" system: a flat ~30-color palette is composed
   into a full nested token tree (surface / border / text / semantic / button).
   The shipped default scheme is `ColorblindSafe` (WCAG-AA, deuteranopia-safe).
   Users can swap to ports of popular code-editor themes (Catppuccin Mocha,
   Tokyonight, Rose Pine, Gruvbox, Nord, Dracula, Solarized, Everforest,
   Kanagawa) at runtime — the whole UI repaints.

   This file encodes the DEFAULT (ColorblindSafe) scheme as the canonical
   palette, plus the semantic + typographic system. Alternate schemes are
   provided as `[data-scheme="…"]` overrides at the bottom — set the attribute
   on <html> or any container to repaint.

   Source of truth: hdg_refactor/Core/HDGR_SchemeConstants.lua,
   hdg_refactor/UI/HDGR_Theme.lua, hdg_refactor/Core/HDGR_Constants.lua
   ============================================================================ */

/* ---- Fonts -------------------------------------------------------------- */
/* The addon uses Blizzard's proprietary Friz Quadrata (FRIZQT__.TTF) for
   EVERY type role — a calm, glyphic humanist serif that is WoW's signature
   in-game face. It cannot be redistributed, so we substitute the nearest
   free classical-serif pairing and flag it: Marcellus (glyphic, flared —
   evokes Friz Quadrata's character for titles/headings) + Spectral (a
   highly legible old-style serif that holds up at 11–13px UI sizes for body,
   labels and numerics). Swap these for the real FRIZQT__.TTF in production. */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ===== Surfaces (darkest → lightest, the 7-step ramp) ================== */
  --surface-sunken:        #0c1116; /* deepest inset / window backdrop      */
  --surface-canvas:        #101418; /* outer canvas (note: 95% alpha live) */
  --surface-canvas-solid:  #101418;
  --surface-panel-soft:    #151d27; /* recessed card chrome                 */
  --surface-panel:         #182029; /* panel body — the workhorse surface   */
  --surface-panel-solid:   #182029;
  --surface-panel-footer:  #1e2934; /* footer accent (one step lighter)     */
  --surface-panel-header:  #222c36; /* header accent                        */
  --surface-raised:        #324150; /* button base / raised chips           */
  --surface-hover:         rgba(78,163,241,0.12);  /* accent @ 12% — row hover    */
  --surface-selected:      rgba(78,163,241,0.18);  /* accent @ 18% — row selected */
  --surface-overlay:       rgba(16,20,24,0.60);    /* modal scrim                 */

  /* ===== Borders ========================================================= */
  --border-default:  #46515d;
  --border-subtle:   rgba(70,81,93,0.55);
  --border-strong:   #7e8b99;          /* = text-dim, used as strong edge   */
  --border-focus:    #4ea3f1;          /* = accent                          */
  --border-selected: rgba(78,163,241,0.95);

  /* ===== Text =========================================================== */
  --text-primary:    #f1f5f9;  /* body                                     */
  --text-heading:    #ffffff;  /* headings / emphasised                    */
  --text-label:      #aab6c3;  /* muted labels                             */
  --text-dim:        #7e8b99;  /* subheading / dim                         */
  --text-disabled:   #5f6a75;
  --text-inverse:    #ffffff;  /* text on accent fills (dark-scheme)       */
  --text-numeric:    #f2c94c;  /* numbers default to amber (warning hue)   */
  --text-collected:  #f1f5f9;  /* "I own this" — reads as normal body      */
  --text-uncollected:#4ea3f1;  /* "I should care" — accent, actionable     */
  --text-shadow:     rgba(0,0,0,0.70);

  /* ===== Semantic (4 channels: accent / success / warning / error) ====== */
  --accent:          #4ea3f1;  /* primary brand color — a clear blue       */
  --accent-brighter: #93c5fd;  /* hover                                    */
  --accent-darker:   #1d4f75;  /* pressed / selected                       */
  --success:         #00a896;  /* teal                                     */
  --warning:         #f2c94c;  /* amber — also the "gold / price" hue      */
  --error:           #d84c8b;  /* magenta (NOT red — CB-safe choice)       */
  --error-deep:      #8f2d59;  /* danger-button fill                       */

  /* Button-text "link" tokens. Buttons ARE the addon's links. The default
     scheme deliberately crosses the blue→orange axis (CB-safe) for the
     rest→active button-text pair. */
  --link:            #4ea3f1;  /* button text at rest (blue)               */
  --link-hover:      #ffa552;  /* button text active (warm orange)         */

  /* ===== Gameplay brand colors (scheme-INVARIANT — fixed across themes) == */
  /* Expansion tints (Palette.expansion.*) — purple Midnight stays purple no
     matter the active scheme. A subset; see HDGR_Constants.EXPANSION_DATA. */
  --exp-classic:      #999999;
  --exp-tbc:          #66b366;
  --exp-wotlk:        #6699cc;
  --exp-cata:         #cc8033;
  --exp-mop:          #4db380;
  --exp-legion:       #80e64d;
  --exp-bfa:          #ccb333;
  --exp-shadowlands:  #9966cc;
  --exp-dragonflight: #3399ff;
  --exp-tww:          #ff8033;
  --exp-midnight:     #9933cc;

  /* Source-type donut legend (Palette.source.*) — how a decor item is got. */
  --src-achievement: #ffd14a;
  --src-quest:       #e89438;
  --src-worldquest:  #3d9ee6;
  --src-drop:        #a14cc7;
  --src-vendor:      #5cb369;
  --src-crafted:     #e0633d;
  --src-reputation:  #707bb5;
  --src-gold-only:   #f2c759;

  /* ===== Map pin states ================================================= */
  --pin-default:  #4ea3f1;
  --pin-selected: #f2c94c;  /* warning amber                              */
  --pin-applied:  #00a896;  /* success                                    */
  --pin-invalid:  #d84c8b;  /* error                                      */

  /* ===== Radii (metrics.radius) ========================================= */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* ===== Spacing (metrics.spacing) — a tight, dense ramp ================ */
  --space-xs:   2px;
  --space-sm:   4px;
  --space-md:   6px;
  --space-lg:   8px;
  --space-xl:   10px;
  --space-xxl:  12px;
  --space-huge: 20px;

  /* ===== Elevation / shadow ============================================= */
  /* Addon panels are flat (1px borders do the work). The only real shadow
     is a hard, near-black drop under floating windows. */
  --elevation-panel:  0 1px 0 rgba(0,0,0,0.25);
  --shadow-window:    0 2px 12px #000;
  --shadow-popup:     0 4px 18px rgba(0,0,0,0.65);

  /* ===== Type families ================================================== */
  --font-display: 'Marcellus', 'Friz Quadrata TT', 'Trebuchet MS', serif;
  --font-ui:      'Spectral', 'Friz Quadrata TT', 'Trebuchet MS', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ===== Type scale (matches scheme.fonts roles) ======================== */
  /* The addon font sizes are small + dense (10–16px). Honour that — this is
     a power-user data tool, not a marketing page. */
  --fs-heading:    16px;  /* window / panel titles                        */
  --fs-subheading: 13px;  /* section headers                             */
  --fs-body:       12px;  /* default body / rows                          */
  --fs-small:      11px;  /* dense list rows, chips                       */
  --fs-caption:    10px;  /* uppercase eyebrow labels, badges            */
  --lh-tight:  1.2;
  --lh-body:   1.4;
  --lh-loose:  1.5;
}

/* ===========================================================================
   Semantic typographic roles. Apply to .hdg-scope (or set on a container).
   =========================================================================== */
.hdg-scope {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-sunken);
  -webkit-font-smoothing: antialiased;
}

.hdg-scope h1, .hdg-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-heading);
  font-weight: 400;
  color: var(--text-heading);
  letter-spacing: 0.2px;
  margin: 0;
}
.hdg-scope h2, .hdg-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-subheading);
  font-weight: 400;
  color: var(--text-heading);
  margin: 0;
}
.hdg-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent);
}
.hdg-label   { font-size: var(--fs-small); color: var(--text-label); }
.hdg-dim     { color: var(--text-dim); }
.hdg-numeric { font-family: var(--font-mono); font-feature-settings: "tnum"; color: var(--text-numeric); }
.hdg-coord   { font-family: var(--font-mono); font-feature-settings: "tnum"; color: var(--accent); }
.hdg-gold    { color: var(--warning); font-feature-settings: "tnum"; }

/* ===========================================================================
   ALTERNATE SCHEMES — set [data-scheme] on a container to repaint.
   Only the palette-level tokens that actually change are overridden; the
   semantic/typographic layer above re-derives from them.
   =========================================================================== */

/* ---- Catppuccin Mocha (the dark default of the "popular themes") -------- */
[data-scheme="mocha"] {
  --surface-sunken:#11111b; --surface-canvas-solid:#1e1e2e; --surface-panel-soft:#181825;
  --surface-panel:#313244; --surface-panel-solid:#313244; --surface-panel-footer:#45475a;
  --surface-panel-header:#45475a; --surface-raised:#585b70;
  --border-default:#6c7086; --border-subtle:rgba(108,112,134,0.55);
  --text-primary:#cdd6f4; --text-heading:#cdd6f4; --text-label:#bac2de; --text-dim:#a6adc8;
  --text-disabled:#6c7086; --text-inverse:#1e1e2e; --text-collected:#cdd6f4; --text-uncollected:#89b4fa;
  --accent:#89b4fa; --accent-brighter:#b4befe; --accent-darker:#1e66f5;
  --success:#a6e3a1; --warning:#f9e2af; --error:#f38ba8; --error-deep:#9d4060;
  --link:#89b4fa; --link-hover:#b4befe; --text-numeric:#f9e2af;
  --surface-hover:rgba(137,180,250,0.12); --surface-selected:rgba(137,180,250,0.18);
  --border-focus:#89b4fa; --pin-default:#89b4fa;
}

/* ---- Tokyonight Night --------------------------------------------------- */
[data-scheme="tokyonight"] {
  --surface-sunken:#16161e; --surface-canvas-solid:#1a1b26; --surface-panel-soft:#1f2335;
  --surface-panel:#292e42; --surface-panel-solid:#292e42; --surface-panel-footer:#3b4261;
  --surface-panel-header:#414868; --surface-raised:#545c7e;
  --border-default:#3b4261; --border-subtle:rgba(59,66,97,0.55);
  --text-primary:#c0caf5; --text-heading:#c0caf5; --text-label:#a9b1d6; --text-dim:#737aa2;
  --text-disabled:#565f89; --text-inverse:#1a1b26; --text-collected:#c0caf5; --text-uncollected:#7aa2f7;
  --accent:#7aa2f7; --accent-brighter:#89ddff; --accent-darker:#3d59a1;
  --success:#9ece6a; --warning:#e0af68; --error:#f7768e; --error-deep:#db4b4b;
  --link:#7aa2f7; --link-hover:#89ddff; --text-numeric:#e0af68;
  --surface-hover:rgba(122,162,247,0.12); --surface-selected:rgba(122,162,247,0.18);
  --border-focus:#7aa2f7; --pin-default:#7aa2f7;
}

/* ---- Rose Pine Main ----------------------------------------------------- */
[data-scheme="rosepine"] {
  --surface-sunken:#191724; --surface-canvas-solid:#1f1d2e; --surface-panel-soft:#21202e;
  --surface-panel:#26233a; --surface-panel-solid:#26233a; --surface-panel-footer:#403d52;
  --surface-panel-header:#403d52; --surface-raised:#524f67;
  --border-default:#6e6a86; --border-subtle:rgba(110,106,134,0.55);
  --text-primary:#e0def4; --text-heading:#e0def4; --text-label:#908caa; --text-dim:#6e6a86;
  --text-disabled:#524f67; --text-inverse:#191724; --text-collected:#e0def4; --text-uncollected:#9ccfd8;
  --accent:#9ccfd8; --accent-brighter:#ebbcba; --accent-darker:#31748f;
  --success:#31748f; --warning:#f6c177; --error:#eb6f92; --error-deep:#9d4d68;
  --link:#9ccfd8; --link-hover:#ebbcba; --text-numeric:#f6c177;
  --surface-hover:rgba(156,207,216,0.12); --surface-selected:rgba(156,207,216,0.18);
  --border-focus:#9ccfd8; --pin-default:#9ccfd8;
}

/* ---- Gruvbox Dark Hard -------------------------------------------------- */
[data-scheme="gruvbox"] {
  --surface-sunken:#1d2021; --surface-canvas-solid:#282828; --surface-panel-soft:#32302f;
  --surface-panel:#3c3836; --surface-panel-solid:#3c3836; --surface-panel-footer:#504945;
  --surface-panel-header:#504945; --surface-raised:#665c54;
  --border-default:#7c6f64; --border-subtle:rgba(124,111,100,0.55);
  --text-primary:#ebdbb2; --text-heading:#fbf1c7; --text-label:#d5c4a1; --text-dim:#bdae93;
  --text-disabled:#a89984; --text-inverse:#282828; --text-collected:#ebdbb2; --text-uncollected:#83a598;
  --accent:#83a598; --accent-brighter:#8ec07c; --accent-darker:#458588;
  --success:#b8bb26; --warning:#fabd2f; --error:#fb4934; --error-deep:#cc241d;
  --link:#83a598; --link-hover:#8ec07c; --text-numeric:#fabd2f;
  --surface-hover:rgba(131,165,152,0.12); --surface-selected:rgba(131,165,152,0.18);
  --border-focus:#83a598; --pin-default:#83a598;
}

/* ---- Nord --------------------------------------------------------------- */
[data-scheme="nord"] {
  --surface-sunken:#2e3440; --surface-canvas-solid:#2e3440; --surface-panel-soft:#3b4252;
  --surface-panel:#434c5e; --surface-panel-solid:#434c5e; --surface-panel-footer:#4c566a;
  --surface-panel-header:#4c566a; --surface-raised:#4c566a;
  --border-default:#4c566a; --border-subtle:rgba(76,86,106,0.55);
  --text-primary:#d8dee9; --text-heading:#eceff4; --text-label:#e5e9f0; --text-dim:#d8dee9;
  --text-disabled:#4c566a; --text-inverse:#2e3440; --text-collected:#d8dee9; --text-uncollected:#88c0d0;
  --accent:#88c0d0; --accent-brighter:#8fbcbb; --accent-darker:#5e81ac;
  --success:#a3be8c; --warning:#ebcb8b; --error:#bf616a; --error-deep:#8d4147;
  --link:#88c0d0; --link-hover:#8fbcbb; --text-numeric:#ebcb8b;
  --surface-hover:rgba(136,192,208,0.12); --surface-selected:rgba(136,192,208,0.18);
  --border-focus:#88c0d0; --pin-default:#88c0d0;
}

/* ---- Solarized Light (the one shipped LIGHT scheme) ---------------------
   Surfaces re-tuned monotonic by lightness so the ramp's depth model holds on
   light: sunken = darkest (deepest inset / window backdrop + wells), raised =
   lightest (base3, most elevated). The other *Light schemes follow the same
   recipe: raised → near-white base, sunken → darkest surface tone, interpolate. */
[data-scheme="solarized-light"] {
  --surface-sunken:#d8cfb0; --surface-canvas-solid:#e1d9bf; --surface-panel-soft:#e8e0c6;
  --surface-panel:#efe8d2; --surface-panel-solid:#efe8d2; --surface-panel-footer:#f4eede;
  --surface-panel-header:#f4eede; --surface-raised:#fdf6e3;
  --border-default:#839496; --border-subtle:rgba(131,148,150,0.55);
  --text-primary:#657b83; --text-heading:#586e75; --text-label:#657b83; --text-dim:#839496;
  --text-disabled:#93a1a1; --text-inverse:#fdf6e3; --text-collected:#657b83; --text-uncollected:#268bd2;
  --accent:#268bd2; --accent-brighter:#2aa198; --accent-darker:#1a6090;
  --success:#859900; --warning:#b58900; --error:#dc322f; --error-deep:#993b2d;
  --link:#268bd2; --link-hover:#2aa198; --text-numeric:#b58900;
  --surface-hover:rgba(38,139,210,0.12); --surface-selected:rgba(38,139,210,0.18);
  --border-focus:#268bd2; --pin-default:#268bd2; --text-shadow:rgba(0,0,0,0.25);
}
