/* Theme "obsidian": pure black like the ArenaSweats site with a modern finish: crisp bright gold, rich red, cool silver accents and cool rim lights.
   Overrides the palette tokens in journey.css :root (see README "Themes"). */

:root {
  /* Surfaces */
  --j-black: #000000;
  --j-coal-1000: #020203;
  --j-coal-950: #060607;
  --j-coal-900: #0b0b0d;
  --j-coal-850: #0f1012;
  --j-coal-800: #131416;
  --j-coal-750: #17181b;
  --j-coal-700: #1c1d21;
  --j-coal-600: #282a2f;
  --j-coal-500: #383a40;

  /* Text */
  --j-text: #f2f3f5;
  --j-text-2: #c9ccd1;
  --j-muted: #979ba3;
  --j-dim: #686c74;
  --j-disabled: #45484e;

  /* Gold: polished metal (bright highlights, saturated amber shadows; never mustard) */
  --j-gold-25: #fffaea;
  --j-gold-50: #f7f4ec;
  --j-gold-100: #ffeab2;
  --j-gold-150: #ffd877;
  --j-gold-200: #f7c75a;
  --j-gold-300: #ebb345;
  --j-gold-400: #d1962c;
  --j-gold-450: #c09a52;
  --j-gold-500: #a8731b;
  --j-gold-600: #7f5413;
  --j-gold-700: #573909;
  --j-gold-ink: #241604;

  /* Red: a deep true red to blood red, with a vivid scarlet for text and glows (no pink, no orange) */
  --j-red-50: #ffe6e1;
  --j-red-100: #ffccc3;
  --j-red-200: #ff6f5c;
  --j-red-300: #e82a24;
  --j-red-350: #a81414;
  --j-red-400: #860c0e;
  --j-red-500: #580608;
  --j-red-550: #430406;
  --j-red-600: #300304;
  --j-rose: #ff4a3a;
  --j-danger: #ff3b30;
  --j-hot: #ff5a33;

  /* Accent (the ember tokens) */
  --j-ember-100: #f3f6fa;
  --j-ember-200: #dce3ec;
  --j-ember-250: #cdd6e1;
  --j-ember-300: #bcc8d6;
  --j-ember-400: #93a2b5;
  --j-ember-500: #5c6a7c;

  /* Metals as materials (placement colours come from tokens.css) */
  --j-silver-50: #f7f8fa;
  --j-silver-100: #eff1f4;
  --j-silver-200: #dfe3e8;
  --j-silver-300: #ced4db;
  --j-silver-350: #c0c7cf;
  --j-silver-400: #b1b9c2;
  --j-silver-500: #9da5af;
  --j-silver-600: #808893;
  --j-silver-700: #5e6670;
  --j-silver-800: #424850;
  --j-bronze-hi: #e7ab76;
  --j-bronze: #d29058;
  --j-bronze-lo: #a96b36;
  --j-bronze-light: #f4c59c;
  --j-bronze-deep: #6d4120;
  --j-rust-hi: #b0604c;
  --j-rust: #96493a;
  --j-rust-lo: #5e2a20;
  --j-rust-light: #d08670;
  --j-rust-deep: #3a1812;

  /* Other */
  --j-up-color: #58d38e;
  --j-magic: #86b2ec;
  --j-true-damage: #f1f2f4;

  /* RGB triplets for alpha use */
  --j-ink-rgb: 6, 6, 7;
  --j-coal-900-rgb: 11, 11, 13;
  --j-coal-800-rgb: 19, 20, 22;
  --j-coal-700-rgb: 28, 29, 33;
  --j-coal-600-rgb: 40, 42, 47;
  --j-coal-500-rgb: 56, 58, 64;
  --j-gold-rgb: 235, 179, 69;
  --j-gold-200-rgb: 247, 199, 90;
  --j-red-rgb: 134, 12, 14;
  --j-red-300-rgb: 232, 42, 36;
  --j-red-200-rgb: 255, 111, 92;
  --j-rose-rgb: 255, 74, 58;
  --j-hot-rgb: 255, 90, 51;
  --j-danger-rgb: 255, 59, 48;
  --j-bronze-rgb: 210, 144, 88;
  --j-rust-rgb: 150, 73, 58;
  --j-ember-rgb: 188, 200, 214;
  --j-ember-200-rgb: 220, 227, 236;
  --j-silver-rgb: 206, 212, 219;
  --j-up-rgb: 88, 211, 142;
  --j-stone-rgb: 110, 114, 122;
  --j-stone-light-rgb: 210, 214, 220;
  --j-plum-rgb: 44, 48, 70;
  --j-light-rgb: 226, 236, 250;
  --j-gold-900-rgb: 110, 74, 10;
  --j-gold-ink-rgb: 24, 16, 4;
  --j-blood-rgb: 34, 2, 4;
  --j-blush-rgb: 255, 120, 112;
  --j-flame-rgb: 180, 200, 230;

  /* Composite tokens */
  --j-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9 0 0 0 0 .95 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --j-backdrop-filter: blur(6px) saturate(0.7) brightness(0.4);
  --j-backdrop-filter-landing: blur(2px) saturate(0.75) brightness(0.46);
  --j-art-tint: saturate(0.88);
  --j-art-tint-hover: saturate(1.05);
  /* Panel material "graphite": a charcoal slab (lifted off the pure black page) running warm at the top left to cool at
     the bottom right, a soft gold light in the top-left corner, a faint cool bounce at the bottom right and a very fine
     static grain, under a crisp gold hairline with a lit top lip. Framed panels (.j-corners / .j-frame) add a gold
     light from the top centre. 92-96% opaque so page art and the hub's moving background read faintly through.
     The alternatives "obsidian-midnight" and "obsidian-smoked" (themes of their own) change only these tokens. */
  --j-slab-warm-rgb: 30, 28, 26;
  --j-slab-rgb: 20, 20, 22;
  --j-slab-cool-rgb: 12, 13, 16;
  --j-slab-light-rgb: var(--j-gold-rgb);
  --j-slab-bounce-rgb: var(--j-light-rgb);
  --j-slab-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .9 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --j-slab-brush: linear-gradient(transparent, transparent);
  --j-panel:
    radial-gradient(120% 150px at 0 0, rgba(var(--j-slab-light-rgb), 0.075), rgba(var(--j-slab-light-rgb), 0) 72%),
    radial-gradient(80% 120px at 100% 100%, rgba(var(--j-slab-bounce-rgb), 0.035), rgba(var(--j-slab-bounce-rgb), 0) 72%),
    var(--j-slab-brush),
    var(--j-slab-grain),
    linear-gradient(160deg, rgba(var(--j-slab-warm-rgb), 0.93) 0%, rgba(var(--j-slab-rgb), 0.94) 50%, rgba(var(--j-slab-cool-rgb), 0.96) 100%);
  --j-panel-shadow: inset 0 1px 0 rgba(var(--j-light-rgb), 0.06), 0 14px 30px -12px rgba(var(--j-shadow-rgb), 0.7);
  --j-panel-feature:
    var(--j-rule-center) 14px 0 / calc(100% - 28px) 1px no-repeat,
    radial-gradient(70% 200px at 50% 0, rgba(var(--j-slab-light-rgb), 0.1), rgba(var(--j-slab-light-rgb), 0) 75%),
    var(--j-panel);
  --j-panel-edge: linear-gradient(90deg, rgba(var(--j-light-rgb), 0) 3%, rgba(var(--j-light-rgb), 0.18) 28%, rgba(var(--j-white-rgb), 0.42) 50%, rgba(var(--j-light-rgb), 0.18) 72%, rgba(var(--j-light-rgb), 0) 97%);
  --j-panel-shine: linear-gradient(116deg, rgba(var(--j-light-rgb), 0.045) 0%, rgba(var(--j-light-rgb), 0.015) 20%, rgba(var(--j-light-rgb), 0) 32%, rgba(var(--j-light-rgb), 0) 74%, rgba(var(--j-light-rgb), 0.022) 88%, rgba(var(--j-light-rgb), 0) 100%);
  --j-line: rgba(var(--j-gold-rgb), 0.14);
  --j-line-mid: rgba(var(--j-gold-rgb), 0.28);
  --j-line-strong: rgba(var(--j-gold-rgb), 0.5);
  --j-veil: radial-gradient(900px 420px at 50% -8%, rgba(var(--j-red-rgb), 0.16) 0%, rgba(var(--j-red-rgb), 0) 70%),
    linear-gradient(180deg, rgba(var(--j-ink-rgb), 0.45) 0%, rgba(var(--j-ink-rgb), 0.82) 34%, var(--j-coal-1000) 74%),
    radial-gradient(ellipse 120% 90% at 50% 40%, rgba(var(--j-shadow-rgb), 0) 40%, rgba(var(--j-shadow-rgb), 0.7) 100%);
  --j-veil-landing: radial-gradient(ellipse 60% 50% at 50% 34%, rgba(var(--j-flame-rgb), 0.07) 0%, rgba(var(--j-flame-rgb), 0) 70%),
    radial-gradient(ellipse 75% 65% at 50% 38%, rgba(var(--j-shadow-rgb), 0.08) 0%, rgba(var(--j-shadow-rgb), 0.66) 100%),
    radial-gradient(ellipse 130% 100% at 50% 50%, rgba(var(--j-shadow-rgb), 0) 55%, rgba(var(--j-blood-rgb), 0.6) 100%),
    linear-gradient(180deg, rgba(var(--j-shadow-rgb), 0.5) 0%, rgba(var(--j-shadow-rgb), 0.5) 45%, rgba(var(--j-ink-rgb), 0.97) 100%);

  /* Red plates (buttons, ribbons): a darker scarlet rim instead of the base theme's salmon one. */
  --j-red-edge: rgba(var(--j-red-300-rgb), 0.4);

  /* Landing "Enter" pill: a confident red at rest */
  --j-enter-bg: linear-gradient(180deg, rgba(var(--j-red-rgb), 0.85), rgba(var(--j-red-rgb), 0.62));
  --j-enter-border: rgba(var(--j-red-200-rgb), 0.4);
  --j-enter-color: var(--j-white);
  /* Selection and the recap light are cool rim light (a red wash over black reads brown); the red edge keeps the brand. */
  --j-select-rgb: 160, 176, 200;
  --j-select-light-rgb: var(--j-light-rgb);
  --j-hero-wash: radial-gradient(60% 120% at 0 100%, rgba(var(--j-light-rgb), 0.1), rgba(var(--j-light-rgb), 0) 70%);
}

/* Black glass: near-black rows with a cool top rim light. */
body.j-body .mh-row:not(.is-selected) {
  background: linear-gradient(180deg, rgba(var(--j-coal-700-rgb), 0.9), rgba(var(--j-coal-800-rgb), 0.9));
  box-shadow: inset 0 1px 0 rgba(var(--j-light-rgb), 0.08), 0 3px 8px rgba(var(--j-shadow-rgb), 0.5);
}