/*
  tokens.css
  ----------
  Every design value for the Eldvik site lives here as a CSS custom
  property. Change the guild's look by editing values in this file only —
  nothing else in the project should hard-code a color, font, spacing
  value, border width, radius or z-index.
*/

:root {

  /* ---------------------------------------------------------------- */
  /* Colors: page background                                          */
  /* ---------------------------------------------------------------- */
  --color-bg-void: #05060a;        /* outermost page background, near-black */

  /* ---------------------------------------------------------------- */
  /* Background image tuning (.site-bg in layout.css) — plain numbers  */
  /* (0-1), not colors, so they're easy to nudge without touching any  */
  /* CSS. Tune these directly to adjust the fixed background image:    */
  /*   --bg-darken             flat darken over the whole image         */
  /*   --bg-vignette-strength  how dark the viewport edges fall to,     */
  /*                           all round                                */
  /*   --bg-vignette-bottom    extra darkening at the bottom edge only, */
  /*                           on top of the above — the footer sits    */
  /*                           there, so it gets more than the sides    */
  /*   --bg-panel-darken       extra darkening specifically behind the  */
  /*                           content column, so the panel keeps       */
  /*                           contrast against a bright part of the    */
  /*                           image (e.g. the mist) regardless of      */
  /*                           where that falls                        */
  /* ---------------------------------------------------------------- */
  --bg-darken: 0.45;
  --bg-vignette-strength: 0.58;
  --bg-vignette-bottom: 0.55;
  --bg-panel-darken: 0.3;

  /* ---------------------------------------------------------------- */
  /* Colors: chrome & frames (the dark stone/metal UI shell)          */
  /* ---------------------------------------------------------------- */
  --color-chrome-dark: #14161c;    /* frame base, deepest stone */
  --color-chrome-mid: #1e2027;     /* frame base, lighter stone */
  --color-chrome-highlight: #2f323c; /* bevel highlight edge on chrome */
  --color-chrome-shadow: #000000;  /* bevel shadow edge on chrome */

  /* ---------------------------------------------------------------- */
  /* Colors: metal accents (antique bronze — TRIM ONLY)                */
  /* Corrected 2026-09: gold is a hairline and small accent details,   */
  /* never a surface. Frame bands, corner pieces and the button are    */
  /* built from the dark metal tones below instead; these three gold   */
  /* tokens are reserved for 1-2px edge lines and tiny accent shapes.  */
  /* ---------------------------------------------------------------- */
  --color-gold: #93753c;             /* accent-detail bronze — small shapes only */
  --color-gold-shadow: #5a4423;      /* deep bronze — small shaded accent facets */
  --color-gold-highlight: #dcbd82;   /* the hairline trim color itself */

  /* ---------------------------------------------------------------- */
  /* Colors: dark cast metal (frame bands, corner pieces, the button) */
  /* Near-black, desaturated, almost no yellow in the body of it.     */
  /* Volume comes from light/shadow within this dark register, not    */
  /* from gold — gold only ever traces the edges (see above).         */
  /* ---------------------------------------------------------------- */
  --color-metal-dark: #15161d;       /* base fill of the metal band/plate — cold blue-black, not neutral */
  --color-metal-rise: #332f2a;       /* raised highlight facet, still dark (kept neutral, it's lit not shadowed) */
  --color-bronze-deepest: #0a0c14;   /* near-black — deepest recess/shadow, cold blue-black */

  /* ---------------------------------------------------------------- */
  /* Colors: parchment (body text panels)                             */
  /* Darkened/yellowed toward aged, handled paper.                    */
  /* ---------------------------------------------------------------- */
  --color-parchment: #c9b077;        /* panel fill, aged tan-brown — locked, do not change */
  --color-parchment-edge: #7c6238;   /* dark worn/dirty edge tone — locked, do not change */
  --color-parchment-text: #221a10;   /* text sitting on parchment — locked, do not change */

  /* Extra-dark body text for content sitting on the darker parts of the
     parchment (e.g. news entry bodies) — added rather than changing
     --color-parchment-text above, which stays as locked. */
  --color-parchment-text-dark: #140d06;

  /* ---------------------------------------------------------------- */
  /* Colors: text on dark chrome                                      */
  /* ---------------------------------------------------------------- */
  --color-text-on-dark: #d9d2c2;    /* warm off-white body text on chrome */
  --color-text-on-dark-muted: #9a9385; /* deemphasized text on chrome */

  /* ---------------------------------------------------------------- */
  /* Colors: links & interactive accents                              */
  /* ---------------------------------------------------------------- */
  --color-link: #ffcc44;
  --color-link-hover: #ffe08a;

  /* Secondary accent, used sparingly (e.g. a faction-flavored detail) */
  --color-accent-blue: #2c5a91;

  /* News-entry title links on parchment specifically — deep enough to
     sit quietly on warm tan paper, distinct from --color-accent-blue's
     more general secondary-accent role. No underline by default (see
     .news-entry__header a in layout.css); hover brightens + underlines. */
  --color-parchment-link: #24425f;
  --color-parchment-link-hover: #3f6c93;

  /* Ice-blue accent, pulled from the guild logo (2026-09). Desaturated
     on purpose — bronze stays the primary accent, this is for small,
     specific interactive touches only: hover states, the active nav
     item. Never used as a fill. */
  --color-ice-accent: #7fa8bd;

  /* Brighter ice blue, for actual glow effects (.glow-trim's gradient,
     the logo glow below) — these need to read as genuinely luminous, so
     this is allowed more saturation than --color-ice-accent above. */
  --color-glow-blue: #86c9e0;

  /* Status words (e.g. role recruitment status) — muted so they sit
     quietly in the existing palette rather than reading as bright
     UI-alert colors. No green/red existed before this.
     --color-status-open measured against the LIGHTEST point in the
     parchment gradient (base #c9b077 blended with its brightest
     mottling highlight, rgba(255,248,214,0.10) — composites to
     ~#ceb780), not the average tone: 8.2:1 there (7.6:1 against the
     flat base, for reference). --color-status-closed unchanged. */
  --color-status-open: #10260e;
  --color-status-closed: #5c2b26;

  /* ---------------------------------------------------------------- */
  /* Logo glow (.site-logo-slot__img in layout.css) — a layered         */
  /* filter:drop-shadow() stack, so the glow follows the logo's own     */
  /* alpha silhouette rather than a box. Kept to two color layers only  */
  /* (2026-09 v2: a third gold layer and a wider halo were stacking     */
  /* into grey mud and reaching too far) — both hard-saturated ice      */
  /* blue, no neutral tones, radii kept small so the glow stays close   */
  /* to the artwork:                                                   */
  /*   inner  — tight, lifts the edges off the dark background         */
  /*   outer  — soft halo, same blue, low opacity                      */
  /*   shadow — dark, offset down, so the logo sits in front of the page*/
  /* ---------------------------------------------------------------- */
  --color-logo-glow-inner: rgba(120, 210, 240, 0.95);
  --color-logo-glow-outer: rgba(120, 210, 240, 0.4);
  --color-logo-glow-shadow: rgba(4, 5, 8, 0.65);
  --logo-glow-inner-radius: 2px;
  --logo-glow-outer-radius: 6px;
  --logo-glow-shadow-radius: 3px;
  --logo-glow-shadow-offset: 3px;

  /* ---------------------------------------------------------------- */
  /* Fonts                                                            */
  /* ---------------------------------------------------------------- */
  --font-display: 'Cinzel', 'Times New Roman', serif;      /* big titles */
  --font-heading: 'Marcellus', 'Times New Roman', serif;    /* subheads, nav */
  --font-body: 'Crimson Text', Georgia, serif;              /* paragraphs */

  /* ---------------------------------------------------------------- */
  /* Type scale (1rem = 16px browser default)                         */
  /* ---------------------------------------------------------------- */
  --text-xs: 0.75rem;     /* 12px — fine print */
  --text-sm: 0.875rem;    /* 14px — captions, labels */
  --text-base: 1rem;      /* 16px — body text */
  --text-lg: 1.25rem;     /* 20px — lead paragraph, nav links */
  --text-xl: 1.563rem;    /* ~25px — small headings */
  --text-2xl: 1.953rem;   /* ~31px — section headings */
  --text-3xl: 2.441rem;   /* ~39px — page titles */
  --text-4xl: 3.052rem;   /* ~49px — hero title */

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* ---------------------------------------------------------------- */
  /* Spacing scale (used for margin, padding, gaps — 8px base)        */
  /* ---------------------------------------------------------------- */
  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */
  --space-10: 8rem;     /* 128px */

  /* ---------------------------------------------------------------- */
  /* Layout                                                           */
  /* ---------------------------------------------------------------- */
  --layout-width: 1000px;   /* centered fixed-width content column */
  --layout-width-narrow: 720px; /* for text-heavy panels */
  --layout-width-wide: 1100px; /* the three-column page shell (top bar inner, main content) */

  /* ---------------------------------------------------------------- */
  /* Border widths                                                    */
  /* ---------------------------------------------------------------- */
  --border-thin: 1px;    /* hairline separators */
  --border-md: 2px;      /* standard panel border */
  --border-thick: 4px;   /* emphasized border */
  --border-ornate: 6px;  /* outer chrome frame border */

  /* ---------------------------------------------------------------- */
  /* Border radii                                                     */
  /* ---------------------------------------------------------------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 16px;
  --radius-round: 999px;

  /* ---------------------------------------------------------------- */
  /* Textures — hand-authored SVG noise (feTurbulence), encoded as    */
  /* data URIs. No image files. Two grains: a harsh, fine turbulence  */
  /* for cast metal, and a softer fractalNoise for parchment fiber.   */
  /* Apply via background-image on a ::before/::after overlay layer;  */
  /* pair with the matching --opacity-texture-* token below and a     */
  /* blend mode (overlay for metal, multiply for parchment).          */
  /* ---------------------------------------------------------------- */
  --texture-metal-noise: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='100'%3E%3Cfilter%20id='m'%3E%3CfeTurbulence%20type='turbulence'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'%20result='n'/%3E%3CfeColorMatrix%20in='n'%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23m)'/%3E%3C/svg%3E");
  --texture-parchment-fiber: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='p'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.045'%20numOctaves='4'%20stitchTiles='stitch'%20result='n'/%3E%3CfeColorMatrix%20in='n'%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23p)'/%3E%3C/svg%3E");
  /* Small tiled diamond motif for the repeating sculpted detail along
     cast-metal bands — dark-on-dark facets only, no gold, so it reads
     as "cast" rather than a decal. */
  --texture-rivet-tile: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%3E%3Cpath%20d='M7%203%20L11%207%20L3%207%20Z'%20fill='rgba(255,240,205,0.14)'/%3E%3Cpath%20d='M3%207%20L11%207%20L7%2011%20Z'%20fill='rgba(0,0,0,0.32)'/%3E%3C/svg%3E");

  --opacity-texture-metal: 0.08;      /* frame moulding grain — dark metal now, kept subtle */
  --opacity-texture-button: 0.12;     /* button plate grain — dark metal now, kept subtle */
  --opacity-texture-parchment: 0.16;  /* parchment fiber — locked, do not change */

  /* ---------------------------------------------------------------- */
  /* Shadows & glow (for bevels on chrome, glow on gold trim)         */
  /* ---------------------------------------------------------------- */
  --shadow-bevel-raised:
    inset 0 1px 0 var(--color-chrome-highlight),
    inset 0 -1px 0 var(--color-chrome-shadow);
  --shadow-bevel-inset:
    inset 0 -1px 0 var(--color-chrome-highlight),
    inset 0 1px 0 var(--color-chrome-shadow);
  --shadow-panel: 0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-glow-gold: 0 0 10px rgba(220, 189, 130, 0.3);

  /* ---------------------------------------------------------------- */
  /* Z-index scale                                                    */
  /* ---------------------------------------------------------------- */
  --z-base: 0;
  --z-content: 10;
  --z-nav: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-tooltip: 1500;
}