/* Design tokens — every colour, type, spacing, radius, motion comes from here.

   Palette is LOCKED to the raw hex values in the "Raw palette" block below.
   Legacy semantic token names (--color-soil, --color-amber, --color-vine,
   --color-ember, etc.) are kept as consumer-facing names so downstream CSS
   files don't have to be touched one-by-one; each is remapped to a member
   of the locked palette so a single source of truth wins everywhere. */

:root {
  /* ── Raw palette (locked, do not change) ─────────
     Reference these directly for anything net-new; legacy names below map
     onto these three groups. */
  --base:      #221808;
  --base-2:    #241A0D;
  --base-3:    #221C14;

  --amber:     #D69730;
  --wine:      #A85D75;
  --seaglass:  #4A9080;

  --parchment: #E8D5A3;
  --ash:       #9A8F7A;

  /* ── Legacy semantic names → locked palette ──────
     Consumer CSS still references these; keep them as aliases so the
     palette migration is a single-file swap. */
  --color-soil:      var(--base);      /* deepest warm dark, page ground */
  --color-bark:      var(--base-2);    /* card / raised surface tone */
  --color-dusk:      var(--base-3);    /* warm mid dark, nav chrome */
  --color-moss:      var(--seaglass);  /* was cold green, now seaglass */
  --color-parchment: var(--parchment);
  --color-cream:     #F0DDB2;          /* emphasis text — light tint of parchment, not a new hue */
  --color-ash:       var(--ash);

  /* Amber is the primary accent site-wide. Sunflower + honey stay as
     aliases so existing rules keep resolving; both point at --amber (honey
     goes a step deeper for hover states via colour-mix). */
  --color-sunflower: var(--amber);
  --color-honey:     #B87F26;          /* -10% amber for hover, derived not new */
  --color-vine:      var(--seaglass);  /* success / positive */
  --color-ember:     var(--wine);      /* destructive / danger */

  --color-admin-accent: #B87F26;       /* deeper amber for admin context (derived) */

  /* Canonical accent name — reference this from anything new. */
  --color-accent:        var(--amber);
  --color-accent-hover:  var(--color-honey);
  --color-amber:         var(--amber);

  /* Semantic status text — desaturated tints on top of dark surfaces.
     Success sits on the seaglass axis, danger on the wine axis, so neither
     hue leaves the locked palette. */
  --color-success-text:        #7dc0b0;
  --color-success-text-strong: #a8dccc;
  --color-danger-text:         #d78ba0;
  --color-danger-text-strong:  #eab3c2;
  --color-online-dot:          #7dc0b0;

  /* ── Surface ladder ─────────────────────────────
     All within the base-family; the "lift" of a card comes from a small
     value step and the bold border, not new hues. */
  --surface-0:     #1A1207;   /* page ground, one step below --base for depth */
  --surface-1:     var(--base);
  --surface-2:     var(--base-2);
  --surface-3:     #2C2013;   /* nested / raised — derived, same warm family */
  --surface-inset: #120C05;   /* inputs — darkest step */

  /* ── Border ladder ───────────────────────────── */
  --border-subtle:  rgba(232, 213, 163, 0.06);
  --border-default: rgba(232, 213, 163, 0.10);
  --border-strong:  rgba(232, 213, 163, 0.18);
  --border-accent:  rgba(214, 151, 48, 0.35);
  --border-amber:   var(--border-accent);

  --border-width-bold: 2px;

  /* ── Transparent variants ─────── */
  --color-accent-05:  rgba(214, 151, 48, 0.05);
  --color-accent-08:  rgba(214, 151, 48, 0.08);
  --color-accent-10:  rgba(214, 151, 48, 0.10);
  --color-accent-20:  rgba(214, 151, 48, 0.20);
  --color-accent-30:  rgba(214, 151, 48, 0.30);
  --color-amber-05:  var(--color-accent-05);
  --color-amber-08:  var(--color-accent-08);
  --color-amber-10:  var(--color-accent-10);
  --color-amber-20:  var(--color-accent-20);
  --color-amber-30:  var(--color-accent-30);
  --color-honey-10:  rgba(184, 127, 38, 0.10);
  --color-honey-20:  rgba(184, 127, 38, 0.20);
  /* Ember (danger) transparents now sit on the wine axis. */
  --color-ember-20:  rgba(168, 93, 117, 0.20);
  /* Vine (success) transparents now sit on the seaglass axis. */
  --color-vine-20:   rgba(74, 144, 128, 0.20);
  --color-wine-10:   rgba(168, 93, 117, 0.10);
  --color-wine-20:   rgba(168, 93, 117, 0.20);
  --color-seaglass-10: rgba(74, 144, 128, 0.10);
  --color-seaglass-20: rgba(74, 144, 128, 0.20);
  --color-parchment-10: rgba(232, 213, 163, 0.10);
  --color-white-05:  rgba(255, 255, 255, 0.05);
  --color-white-06:  rgba(255, 255, 255, 0.06);
  --color-white-10:  rgba(255, 255, 255, 0.10);
  --color-black-40:  rgba(0, 0, 0, 0.40);

  /* ── Typography ─────────────────────────────────
     Shared / community pages use Cinzel for display.
     World-scoped display face is switched at html[data-game-view] below;
     that keeps the swap route-driven, never user-driven. */
  --font-display: 'Cinzel', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Type scale — modular ~1.2 ratio, tuned by hand */
  --text-xs:   0.75rem;     /* 12 */
  --text-sm:   0.8125rem;   /* 13 */
  --text-base: 0.9375rem;   /* 15 */
  --text-lg:   1.0625rem;   /* 17 */
  --text-xl:   1.25rem;     /* 20 */
  --text-2xl:  1.5rem;      /* 24 */
  --text-3xl:  1.875rem;    /* 30 */
  --text-4xl:  2.25rem;     /* 36 */
  --text-5xl:  3rem;        /* 48 */
  --text-6xl:  4rem;        /* 64 */

  --leading-tight:  1.15;
  --leading-snug:   1.4;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.1em;
  --tracking-display: 0.12em;

  /* ── Spacing — 4px base ──────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Radius ──────────────────────────────────── */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-full: 9999px;

  /* ── Layout ──────────────────────────────────── */
  --sidebar-width:     240px;
  --nav-height:        52px;
  --max-content-width: 1240px;
  --max-reading-width: 1520px;
  --max-prose-width:    680px;
  --max-form-width:     560px;

  /* ── Motion ──────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 260ms;
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-base: var(--duration-base) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);

  /* ── Elevation ─────────────────────────────────
     Hard offset shadows keyed to the new base tone so the shadow plate
     stays a warm dark rather than drifting toward black. */
  --shadow-sm:    2px 2px 0 rgba(26, 18, 7, 0.55);
  --shadow-card:  3px 3px 0 rgba(26, 18, 7, 0.60);
  --shadow-hover: 5px 5px 0 rgba(26, 18, 7, 0.65);
  --shadow-pop:   7px 7px 0 rgba(26, 18, 7, 0.70);

  /* ── Focus ───────────────────────────────────── */
  --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--color-accent);

  /* ── Global grain texture ───────────────────── */
  --grain-bg: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-size: 220px 220px;
  --grain-opacity: 0.05;
  --grain-opacity-wash: 0.07;

  /* ── Warm surface wash ────────────────────────
     Rebuilt from the locked palette: base-2 top band fading into base by
     25%, with an ultra-low-opacity amber glow in the top-left corner.
     Keeps large-surface depth without introducing a new hue and without
     the "blocky competing panels" failure mode: the wash is a soft
     value drift, not a coloured plate. */
  --surface-wash:
    radial-gradient(ellipse 90% 70% at 20% -15%, var(--color-amber-08), transparent 45%),
    linear-gradient(180deg, var(--base-2) 0%, var(--base) 25%, var(--base) 100%);

  /* ── Starfield tile ───────────────────────── */
  --starfield-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='20' cy='40' r='1.5' fill='%23fff' fill-opacity='0.9'/%3E%3Ccircle cx='64' cy='136' r='2' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='104' cy='24' r='2.5' fill='%23fff' fill-opacity='0.85'/%3E%3Ccircle cx='142' cy='84' r='1.5' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='172' cy='156' r='2' fill='%23fff' fill-opacity='0.75'/%3E%3Ccircle cx='36' cy='176' r='2.5' fill='%23fff' fill-opacity='0.55'/%3E%3Ccircle cx='92' cy='184' r='1.5' fill='%23fff' fill-opacity='0.7'/%3E%3Ccircle cx='190' cy='50' r='2' fill='%23fff' fill-opacity='0.6'/%3E%3Ccircle cx='124' cy='110' r='1.5' fill='%23fff' fill-opacity='0.65'/%3E%3Ccircle cx='10' cy='110' r='2' fill='%23fff' fill-opacity='0.7'/%3E%3C/svg%3E");
  --starfield-size: 200px 200px;

  /* ── Z-index scale ───────────────────────────── */
  --z-base:     0;
  --z-raised:   1;
  --z-sticky:   100;
  --z-sidebar:  120;
  --z-overlay:  150;
  --z-drawer:   160;
  --z-dropdown: 200;
  --z-modal:    300;
  --z-toast:    400;

  /* ── Breakpoints ───────────────────────────── */
  --bp-mobile-max:  767px;
  --bp-tablet-min:  768px;
  --bp-tablet-max: 1023px;
  --bp-desktop-min: 1024px;
}

/* World typography scoping was removed at the user's request; every
   world now uses the shared Cinzel / Inter / JetBrains Mono system, so
   this block intentionally has no font overrides. data-game-view still
   drives the accent palette swap in components/game_themes.css. */

/* Admin context — retints accent to a deeper amber for admins. */
.admin-context {
  --color-accent:   var(--color-admin-accent);
  --color-amber:    var(--color-admin-accent);
  --border-accent:  rgba(184, 127, 38, 0.35);
  --border-amber:   rgba(184, 127, 38, 0.35);
  --color-accent-05: rgba(184, 127, 38, 0.05);
  --color-accent-08: rgba(184, 127, 38, 0.08);
  --color-accent-10: rgba(184, 127, 38, 0.10);
  --color-accent-20: rgba(184, 127, 38, 0.20);
  --color-accent-30: rgba(184, 127, 38, 0.30);
  --color-amber-05: rgba(184, 127, 38, 0.05);
  --color-amber-08: rgba(184, 127, 38, 0.08);
  --color-amber-10: rgba(184, 127, 38, 0.10);
  --color-amber-20: rgba(184, 127, 38, 0.20);
  --color-amber-30: rgba(184, 127, 38, 0.30);
}

/* World themes set their own accent overrides on <html>; let the world
   selector win by resetting the admin override back to inherit inside a
   world context. */
html[data-game-view="minecraft"] .admin-context,
html[data-game-view="vintage-story"] .admin-context {
  --color-accent:   unset;
  --color-amber:    unset;
  --border-accent:  unset;
  --border-amber:   unset;
  --color-accent-05: unset;
  --color-accent-08: unset;
  --color-accent-10: unset;
  --color-accent-20: unset;
  --color-accent-30: unset;
  --color-amber-05: unset;
  --color-amber-08: unset;
  --color-amber-10: unset;
  --color-amber-20: unset;
  --color-amber-30: unset;
}

/* ── Global grain texture application ─────────── */
body,
.topbar,
.sidebar,
.public-header,
.public-footer,
.landing-footer,
.card,
.reading-surface,
.grain {
  position: relative;
}

body::before,
.topbar::before,
.sidebar::before,
.public-header::before,
.public-footer::before,
.landing-footer::before,
.card::before,
.reading-surface::before,
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain-bg);
  background-size: var(--grain-size);
  background-repeat: repeat;
  opacity: var(--grain-opacity);
  z-index: 0;
  border-radius: inherit;
  mix-blend-mode: overlay;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
}

body,
.public-hero {
  background-image: var(--surface-wash);
}

body::before,
.public-hero::before {
  opacity: var(--grain-opacity-wash);
}

.topbar > *,
.sidebar > *,
.public-header > *,
.public-footer > *,
.landing-footer > *,
.card > *,
.reading-surface > *,
.grain > * {
  position: relative;
  z-index: 1;
}