/* ==========================================================================
THEME — "Cocoa Amber" (currently active)
Warm brown ground, cream and beige type, black bands, orange-yellow accents.
TO SWITCH THEMES: in index.html, find the palette in and
point it at a different file, e.g.
Only one palette file is ever linked. Every theme defines exactly the same
variable names, so swapping the filename swaps the entire look.
All text/background pairs below meet WCAG AA contrast.
========================================================================== */
:root {
/* ---- Core palette ------------------------------------------------- */
--ink: #3a2a1d; /* brown page ground */
--ink-soft: #33241a; /* alternating sections, a shade deeper */
--panel: #463322; /* cards, raised off the ground */
--panel-2: #4d3927;
--panel-3: #573f2a;
--line: #5a4430; /* hairlines */
--line-2: #6f553d; /* stronger borders */
--ember: #eda93f; /* orange-yellow — primary accent */
--ember-dk: #d18f2a;
--flame: #f7c46a; /* hover / highlight */
--gold: #e8c98d; /* italics, captions, quotes */
--cream: #f6ead6; /* headings */
--cream-dim: #ddcaa8; /* body copy — beige */
--muted: #c6b294; /* secondary copy */
--muted-dk: #b7a284; /* micro-labels */
/* ---- RGB triplets, for colours mixed with transparency ------------ */
--c-ground: 21, 16, 11; /* the black end of the palette */
--c-ember: 237, 169, 63;
--c-flame: 247, 196, 106;
--c-gold: 232, 201, 141;
--c-paper: 246, 234, 214;
--c-line: 150, 118, 84;
--c-shadow: 14, 9, 5;
--sel-bg: rgba(237,169,63,.34);
--sel-ink: #1c140d;
/* ---- Page ground --------------------------------------------------- */
--bg-page:
radial-gradient(1200px 700px at 78% -8%, rgba(237, 169, 63, .13), transparent 62%),
radial-gradient(900px 620px at 6% 108%, rgba(180, 110, 40, .12), transparent 60%),
linear-gradient(180deg, #3d2c1f 0%, #382819 48%, #2f2116 100%);
/* ---- Buttons -------------------------------------------------------- */
--grad-btn: linear-gradient(180deg, #f0b44e, #d18f2a);
--grad-btn-hover: linear-gradient(180deg, #f7c46a, #dd9a30);
--btn-ink: #15100b; /* black on amber */
--btn-shadow: 0 10px 26px -12px rgba(237,169,63,.7), inset 0 1px 0 rgba(255,236,200,.4);
--btn-shadow-hover: 0 16px 34px -12px rgba(237,169,63,.85), inset 0 1px 0 rgba(255,242,215,.5);
--tint-faint: rgba(246,234,214,.04);
/* ---- Header & drawer ------------------------------------------------ */
--head-fade: linear-gradient(180deg, rgba(21,16,11,.7), rgba(21,16,11,0));
--head-bg: rgba(26,19,13,.92);
--grad-drawer: linear-gradient(180deg, #4a3624, #2c1f14);
--scrim-nav: rgba(14,9,5,.7);
/* ---- Hero ----------------------------------------------------------- */
--veil-hero:
linear-gradient(180deg, rgba(24,17,11,.82) 0%, rgba(30,21,14,.34) 26%, rgba(34,24,16,.20) 46%, rgba(40,28,19,.78) 78%, #3a2a1d 100%),
linear-gradient(90deg, rgba(26,18,12,.88) 0%, rgba(32,23,15,.46) 38%, rgba(40,28,19,.08) 70%, rgba(34,24,16,.36) 100%),
radial-gradient(120% 82% at 50% 42%, rgba(0,0,0,0) 32%, rgba(16,11,7,.66) 100%);
--glow-hero: radial-gradient(closest-side, rgba(240,180,78,.32), rgba(210,140,45,.14) 46%, rgba(0,0,0,0) 76%);
--glow-hero-opacity: .85;
--grad-title: linear-gradient(178deg, #fff6e4 8%, #f3e0be 42%, #e0bd85 100%);
--hero-title-shadow: 0 1px 3px rgba(12,8,4,.38);
--hero-lead-ink: #e2d1b1;
--hero-lead-shadow: 0 2px 18px rgba(12,8,4,.66);
--ticker-bg: rgba(21,16,11,.5);
/* ---- Surfaces ------------------------------------------------------- */
--grad-values: linear-gradient(180deg, #3a2a1d 0%, #33241a 100%);
--grad-panel: linear-gradient(158deg, #4d3927 0%, #463322 62%, #3e2d1e 100%);
--grad-contact: radial-gradient(900px 420px at 15% 0%, rgba(237,169,63,.11), transparent 66%), #3a2a1d;
--grad-form: linear-gradient(165deg, #4d3927, #463322 65%, #3e2d1e);
--grad-foot: linear-gradient(180deg, #241a11, #15100b);
--frame-inner: inset 0 0 46px rgba(14,9,5,.46);
--stamp-bg: rgba(30,21,14,.9);
--chip-bg: rgba(14,9,5,.28);
/* ---- Photo overlays -------------------------------------------------- */
--scrim-feature: linear-gradient(180deg, rgba(40,28,19,0) 0%, rgba(38,27,18,.28) 30%, rgba(40,29,19,.86) 60%, #463322 100%);
--scrim-ink: #d8c5a3;
--chip-bg-photo: rgba(24,17,11,.62);
--chip-border-photo: rgba(150,118,84,.55);
--chip-ink-photo: #ddcaa8;
--badge-bg: rgba(24,17,11,.72);
--badge-border: rgba(237,169,63,.45);
--badge-ink: #f7c46a;
--scrim-tile: linear-gradient(180deg, rgba(24,17,11,0), rgba(22,15,10,.9));
/* ---- Form ------------------------------------------------------------ */
--input-bg: rgba(20,14,9,.5);
--input-bg-focus: rgba(20,14,9,.72);
--input-border-hover: #8a6c4c;
--select-bg: #463322;
--err: #f0906a;
--err-border: #c4643f;
--err-ring: 0 0 0 3px rgba(196,100,63,.18);
--ok-border: rgba(150,190,110,.36);
--ok-bg: rgba(118,156,74,.14);
--ok-ink: #b7d493;
/* ---- Lightbox --------------------------------------------------------- */
--lb-bg: rgba(16,11,7,.95);
--lb-btn-bg: rgba(46,33,22,.86);
/* ---- Photo treatment -------------------------------------------------- */
--img-hero: saturate(94%) contrast(103%) brightness(78%);
--img-frame: saturate(100%) contrast(101%) brightness(99%);
--img-card: saturate(104%) brightness(92%) contrast(102%);
--img-card-hover: saturate(110%) brightness(100%) contrast(102%);
--img-tile: saturate(100%) brightness(92%) contrast(102%);
--img-tile-hover: saturate(106%) brightness(102%) contrast(102%);
/* ---- Atmosphere (read by js/main.js for the hero canvas) -------------- */
--grain-opacity: .05;
--spark-hsl: 38, 95%, 62%;
--spark-blend: lighter;
--spark-alpha: .7; /* 0 turns the canvas off entirely */
--spark-dir: -1; /* -1 rises, 1 falls */
--spark-scale: 1;
/* ---- Depth ------------------------------------------------------------ */
--shadow-sm: 0 2px 10px rgba(14,9,5,.4);
--shadow: 0 16px 40px -18px rgba(14,9,5,.8);
--shadow-lg: 0 40px 90px -40px rgba(14,9,5,.9);
}