/*
  TRACES IN TIME — ERA I / 9000 BCE DESIGN SYSTEM
  Point 5: shared visual language extracted from the approved Home.
  This file owns tokens and reusable components. Page-specific composition
  remains in each page stylesheet so different locations can feel distinct.
*/

:root {
  /* Core palette */
  --ds-charcoal-950: #0b0705;
  --ds-charcoal-900: #110a06;
  --ds-shadow-900: #160f0a;
  --ds-stone-900: #1f1712;
  --ds-stone-800: #2b211b;
  --ds-stone-650: #4b3b31;
  --ds-leather-800: #4c2b19;
  --ds-leather-650: #6e4025;
  --ds-leather-500: #9a6237;
  --ds-leather-300: #e2b576;
  --ds-bone-100: #f8e7c7;
  --ds-bone-250: #e8c897;
  --ds-bone-400: #d7b37b;
  --ds-ash-100: #d8d0c3;
  --ds-ash-400: #93887a;
  --ds-earth-700: #57301b;
  --ds-earth-600: #704524;
  --ds-ochre-700: #7d3a1d;
  --ds-ochre-600: #9b4b20;
  --ds-ochre-450: #be7444;
  --ds-ember-600: #d96a2f;
  --ds-ember-450: #ed884a;
  --ds-fire-300: #ffb366;
  --ds-fire-150: #ffd49c;
  --ds-vegetation-700: #39452a;
  --ds-vegetation-500: #65754a;

  /* Semantic colors */
  --ds-success: #48582e;
  --ds-success-soft: #697a49;
  --ds-error: #933c2b;
  --ds-error-soft: #b45a43;
  --ds-clue: #9b5b31;
  --ds-focus: #ffd097;
  --ds-disabled: #776b61;
  --ds-overlay: rgba(8, 4, 2, .66);
  --ds-overlay-soft: rgba(8, 4, 2, .42);

  /* Text on materials */
  --ds-text-on-leather: #2f1d13;
  --ds-text-on-leather-muted: #573823;
  --ds-text-on-stone: #f3c88d;
  --ds-text-on-stone-muted: #d39a66;
  --ds-text-on-dark: #f8e7c7;
  --ds-text-on-dark-muted: #d7b37b;
  --ds-text-danger: #fff0dc;

  /* Typography: local/system only — no remote dependency */
  --ds-font-display: "Copperplate", "Copperplate Gothic Light", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --ds-font-reading: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --ds-font-ui: "Trebuchet MS", "Segoe UI", Arial, sans-serif;

  --ds-type-display-xl: clamp(2.55rem, 3.35vw, 4.125rem);
  --ds-type-display-lg: clamp(1.55rem, 2.1vw, 2.65rem);
  --ds-type-h1: clamp(2.1rem, 3vw, 3.75rem);
  --ds-type-h2: clamp(1.45rem, 2vw, 2.35rem);
  --ds-type-h3: clamp(1.05rem, 1.35vw, 1.55rem);
  --ds-type-body: clamp(.93rem, .9vw, 1.1rem);
  --ds-type-body-sm: clamp(.82rem, .72vw, .95rem);
  --ds-type-label: clamp(.68rem, .58vw, .78rem);
  --ds-type-stat: clamp(1.85rem, 2.75vw, 3.4rem);
  --ds-leading-tight: .96;
  --ds-leading-heading: 1.08;
  --ds-leading-body: 1.48;
  --ds-leading-ui: 1.18;
  --ds-track-display: .055em;
  --ds-track-label: .14em;
  --ds-track-eyebrow: .22em;

  /* Spacing — 4px base rhythm */
  --ds-space-0: 0;
  --ds-space-1: .25rem;
  --ds-space-2: .5rem;
  --ds-space-3: .75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;
  --ds-space-16: 4rem;
  --ds-space-20: 5rem;

  /* Shape */
  --ds-radius-xs: 4px;
  --ds-radius-sm: 8px;
  --ds-radius-md: 16px;
  --ds-radius-lg: 24px;
  --ds-radius-pill: 999px;
  --ds-radius-organic-a: 9% 7% 8% 6% / 5% 7% 5% 8%;
  --ds-radius-organic-b: 7% 5% 8% 6% / 16% 14% 17% 12%;
  --ds-radius-rock: 43% 35% 38% 28% / 27% 21% 33% 23%;

  /* Layout */
  --ds-content-xs: 28rem;
  --ds-content-sm: 38rem;
  --ds-content-md: 56rem;
  --ds-content-lg: 76rem;
  --ds-content-xl: 96rem;
  --ds-page-gutter: clamp(.875rem, 3vw, 3rem);

  /* Breakpoint reference values (media queries below use the same values) */
  --ds-bp-phone: 560px;
  --ds-bp-tablet: 900px;
  --ds-bp-laptop: 1280px;
  --ds-bp-wide: 1600px;

  /* Depth and motion */
  --ds-shadow-soft: 0 10px 28px rgba(0, 0, 0, .34);
  --ds-shadow-panel: 0 22px 58px rgba(0, 0, 0, .55);
  --ds-shadow-heavy: 0 28px 72px rgba(0, 0, 0, .64);
  --ds-shadow-inset-light: inset 0 1px rgba(255, 244, 214, .45);
  --ds-glow-ember: 0 0 22px rgba(232, 108, 43, .14);
  --ds-glow-fire: 0 0 30px rgba(255, 179, 102, .22);
  --ds-duration-fast: 180ms;
  --ds-duration-medium: 260ms;
  --ds-duration-slow: 520ms;
  --ds-ease-natural: cubic-bezier(.2, .7, .25, 1);

  /* Compatibility aliases used by the approved Point 4 Home */
  --ink: #24140d;
  --ink-2: var(--ds-leather-800);
  --ink-3: var(--ds-leather-650);
  --bone: var(--ds-bone-100);
  --bone-2: var(--ds-bone-400);
  --ochre: var(--ds-ochre-600);
  --ember: var(--ds-ember-600);
  --ember-hot: var(--ds-fire-300);
  --leather-hi: var(--ds-leather-300);
  --rope: #5a351e;
  --stone: var(--ds-stone-900);
  --shadow: var(--ds-shadow-panel);
  --display: var(--ds-font-display);
  --serif: var(--ds-font-reading);
  --ui: var(--ds-font-ui);
}

/* Foundation */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ds-charcoal-950); color: var(--ds-text-on-dark); }
body { font-family: var(--ds-font-ui); overflow-x: hidden; }
a, button, input, select, textarea { font: inherit; }
button, [role="button"] { color: inherit; }
button:not(:disabled), [role="button"]:not([aria-disabled="true"]) { cursor: pointer; }
::selection { background: rgba(217, 106, 47, .42); color: #fff7e8; }

/* Type roles */
.ds-display,
.ds-heading-1,
.ds-heading-2,
.ds-heading-3 { margin: 0; font-family: var(--ds-font-display); }
.ds-display { font-size: var(--ds-type-display-xl); font-weight: 900; line-height: var(--ds-leading-tight); letter-spacing: -.025em; }
.ds-heading-1 { font-size: var(--ds-type-h1); font-weight: 900; line-height: var(--ds-leading-heading); }
.ds-heading-2 { font-size: var(--ds-type-h2); font-weight: 900; line-height: var(--ds-leading-heading); letter-spacing: var(--ds-track-display); }
.ds-heading-3 { font-size: var(--ds-type-h3); font-weight: 900; line-height: 1.15; }
.ds-body { font: 700 var(--ds-type-body) / var(--ds-leading-body) var(--ds-font-reading); }
.ds-body-small { font: 700 var(--ds-type-body-sm) / 1.42 var(--ds-font-reading); }
.ds-label,
.ds-eyebrow { font-family: var(--ds-font-ui); font-weight: 900; line-height: var(--ds-leading-ui); text-transform: uppercase; }
.ds-label { font-size: var(--ds-type-label); letter-spacing: var(--ds-track-label); }
.ds-eyebrow { font-size: var(--ds-type-label); letter-spacing: var(--ds-track-eyebrow); }
.ds-stat { font: 900 var(--ds-type-stat) / .9 var(--ds-font-display); }

/* Material language. Use one dominant material per content zone. */
.ds-material-leather {
  color: var(--ds-text-on-leather);
  background-color: #a76f40;
  background-image: linear-gradient(rgba(250, 221, 173, .18), rgba(98, 52, 24, .08)), url("era1-leather-clean.jpg");
  background-position: center;
  background-size: cover;
}
.ds-material-stone {
  color: var(--ds-text-on-stone);
  background-color: var(--ds-stone-800);
  background-image: linear-gradient(rgba(10, 7, 5, .16), rgba(10, 7, 5, .28)), url("era1-stone-clean.jpg");
  background-position: center;
  background-size: cover;
}
.ds-material-wood {
  color: var(--ds-bone-100);
  background-color: #4c2e1d;
  background-image: linear-gradient(90deg, rgba(21, 11, 7, .34), transparent 14%, rgba(234, 174, 105, .10) 48%, transparent 76%, rgba(18, 10, 6, .38)), repeating-linear-gradient(2deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px);
}
.ds-material-bone {
  color: #342016;
  background: linear-gradient(145deg, #f1dbb3, #d2b383 58%, #b89567);
}
.ds-material-fiber {
  color: #302015;
  background-color: #b38b5c;
  background-image: repeating-linear-gradient(88deg, rgba(62, 39, 22, .10) 0 1px, transparent 1px 5px), repeating-linear-gradient(2deg, rgba(255, 244, 217, .09) 0 1px, transparent 1px 6px);
}
.ds-material-charcoal { color: var(--ds-bone-100); background: linear-gradient(145deg, #241914, #0f0a08); }
.ds-material-ochre { color: #fff0d5; background: linear-gradient(145deg, #a45126, #74351b); }
.ds-material-ash { color: #2b211c; background: linear-gradient(145deg, #d2c8b8, #9c9082); }

/* Reusable panels */
.ds-panel {
  position: relative;
  border: 1px solid rgba(91, 50, 26, .44);
  box-shadow: var(--ds-shadow-panel), var(--ds-shadow-inset-light);
}
.ds-panel--primary { padding: var(--ds-space-8); border-radius: var(--ds-radius-organic-a); }
.ds-panel--secondary { padding: var(--ds-space-5) var(--ds-space-6); border-radius: var(--ds-radius-organic-b); }
.ds-panel--info { padding: var(--ds-space-5); border-radius: var(--ds-radius-md); }
.ds-panel--small { padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-sm); }
.ds-panel--stats { padding: var(--ds-space-6); border-radius: var(--ds-radius-rock); }
.ds-panel--card { padding: var(--ds-space-5); border-radius: var(--ds-radius-md); }
.ds-panel--puzzle { padding: clamp(1rem, 2.2vw, 2rem); border-radius: var(--ds-radius-lg); }
.ds-panel--modal { width: min(92vw, 44rem); max-height: min(86vh, 52rem); overflow: auto; padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-heavy); }
.ds-panel--important { border-color: rgba(217, 106, 47, .62); box-shadow: var(--ds-shadow-heavy), var(--ds-glow-ember); }

/* Buttons. Primary = ember/leather; secondary = quiet material action. */
.btn,
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: .80em 1.10em;
  border: 1px solid #4c2714;
  border-radius: var(--ds-radius-xs);
  background: linear-gradient(180deg, rgba(255, 233, 193, .28), rgba(74, 33, 15, .08)), #824724;
  color: #ffe7bd;
  box-shadow: 0 7px 16px rgba(64, 29, 12, .28), inset 0 1px rgba(255, 246, 217, .39), inset 0 -2px rgba(29, 13, 6, .30);
  font: 900 clamp(9px, .64vw, 12px) / 1 var(--ds-font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 1px #381b0d;
  transition: transform var(--ds-duration-fast) ease, filter var(--ds-duration-fast) ease, box-shadow var(--ds-duration-fast) ease, background-color var(--ds-duration-fast) ease;
}
.btn:hover:not(:disabled),
.ds-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.09); box-shadow: 0 11px 22px rgba(64, 29, 12, .36), var(--ds-glow-ember); }
.btn:active:not(:disabled),
.ds-btn:active:not(:disabled) { transform: translateY(0) scale(.985); filter: brightness(.98); }
.btn.ghost,
.ds-btn--secondary { background: rgba(111, 64, 32, .15); color: #321d13; text-shadow: none; border-color: rgba(70, 36, 18, .50); box-shadow: inset 0 1px rgba(255,255,255,.12); }
.ds-btn--small { min-height: 32px; padding: .62em .86em; font-size: var(--ds-type-label); }
.ds-btn--icon { width: 42px; height: 42px; min-height: 42px; padding: 0; border-radius: 50%; }
.ds-btn--danger { background: linear-gradient(180deg, rgba(255, 217, 188, .16), rgba(70, 16, 12, .18)), #743125; border-color: #4e2019; color: var(--ds-text-danger); }
.btn:disabled,
.ds-btn:disabled,
.ds-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .56; filter: grayscale(.35); transform: none; box-shadow: none; }

/* Frames: deliberately varied; apply only where the material calls for it. */
.ds-frame-simple { border: 1px solid rgba(111, 75, 50, .52); }
.ds-frame-incised { box-shadow: inset 0 0 0 1px rgba(53, 28, 15, .42), inset 0 0 0 5px rgba(236, 184, 117, .07); }
.ds-frame-burnt { border: 1px solid rgba(54, 27, 14, .82); box-shadow: inset 0 0 18px rgba(39, 15, 7, .26), 0 10px 28px rgba(0,0,0,.32); }
.ds-frame-rope { outline: 4px solid rgba(66, 39, 24, .88); outline-offset: 4px; }
.ds-frame-stone { border-color: rgba(111, 75, 50, .58); box-shadow: var(--ds-shadow-panel), inset 0 1px rgba(255, 171, 91, .10), inset 0 -8px 20px rgba(0, 0, 0, .30); }
.ds-frame-wood { border: 5px solid #422718; box-shadow: 0 8px 22px rgba(0,0,0,.44), inset 0 1px rgba(190,116,64,.14); }

/* Pictograms: cave-mark character, modern UI clarity. */
.ds-pictogram { display: inline-grid; place-items: center; color: var(--ds-ochre-700); }
.ds-pictogram svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ds-pictogram--active { color: var(--ds-ember-600); filter: drop-shadow(0 0 6px rgba(217,106,47,.22)); }

/* Tooltip — works with mouse, keyboard and touch focus. */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 80;
  left: 50%;
  bottom: calc(100% + .55rem);
  width: max-content;
  max-width: min(18rem, 78vw);
  padding: .48rem .62rem;
  border: 1px solid rgba(226, 181, 118, .26);
  border-radius: var(--ds-radius-sm);
  background: rgba(20, 13, 9, .96);
  color: var(--ds-bone-100);
  box-shadow: var(--ds-shadow-soft);
  font: 800 .76rem / 1.35 var(--ds-font-ui);
  letter-spacing: .02em;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, .28rem);
  transition: opacity var(--ds-duration-fast) ease, transform var(--ds-duration-fast) ease;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-within::after { opacity: 1; transform: translate(-50%, 0); }

/* Modal / result language */
.ds-modal-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--ds-page-gutter); background: var(--ds-overlay); backdrop-filter: blur(5px); }
.ds-dialog { color: var(--ds-text-on-leather); background: linear-gradient(rgba(250,221,173,.16), rgba(98,52,24,.08)), url("era1-leather-clean.jpg") center / cover; }
.ds-dialog--important { border-color: rgba(217,106,47,.68); box-shadow: var(--ds-shadow-heavy), var(--ds-glow-fire); }
.ds-result--correct { border-left: 5px solid var(--ds-success); }
.ds-result--wrong { border-left: 5px solid var(--ds-error); }
.ds-result--locked { opacity: .74; filter: saturate(.72); }
.ds-result--unlocked { border-color: rgba(217,106,47,.55); box-shadow: var(--ds-shadow-panel), var(--ds-glow-ember); }

/* Forms and game controls */
.ds-field { display: grid; gap: var(--ds-space-2); }
.ds-field > label { font: 900 var(--ds-type-label) / var(--ds-leading-ui) var(--ds-font-ui); letter-spacing: var(--ds-track-label); text-transform: uppercase; color: var(--ds-text-on-leather-muted); }
.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(73, 39, 21, .54);
  border-radius: var(--ds-radius-sm);
  padding: .68rem .78rem;
  background: rgba(250, 231, 198, .38);
  color: #2c1a11;
  box-shadow: inset 0 1px 3px rgba(61, 31, 16, .12);
}
.ds-textarea { min-height: 7rem; resize: vertical; }
.ds-check,
.ds-radio { width: 1.1rem; height: 1.1rem; accent-color: var(--ds-ochre-600); }
.ds-progress { width: 100%; height: .72rem; overflow: hidden; border: 1px solid rgba(64,35,20,.42); border-radius: var(--ds-radius-pill); background: rgba(55, 34, 23, .22); }
.ds-progress > span { display: block; height: 100%; width: var(--progress, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--ds-ochre-600), var(--ds-ember-600), var(--ds-fire-300)); transition: width var(--ds-duration-medium) var(--ds-ease-natural); }
.ds-badge,
.ds-tag { display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(85,45,23,.30); color: #4c2b1a; background: rgba(128,79,42,.10); font: 900 var(--ds-type-label) / 1 var(--ds-font-ui); letter-spacing: .06em; text-transform: uppercase; }
.ds-badge { min-width: 1.75rem; min-height: 1.75rem; padding: .35rem .5rem; border-radius: var(--ds-radius-pill); }
.ds-tag { padding: .42rem .56rem; border-radius: var(--ds-radius-xs); }
.ds-tabs { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.ds-tab { border: 1px solid rgba(85,45,23,.34); border-radius: var(--ds-radius-sm); padding: .58rem .78rem; background: rgba(128,79,42,.10); color: var(--ds-text-on-leather); font-weight: 900; }
.ds-tab[aria-selected="true"], .ds-tab.active { border-color: var(--ds-ochre-600); box-shadow: inset 0 -2px var(--ds-ochre-600); color: var(--ds-ochre-700); }
.ds-status { display: inline-flex; align-items: center; gap: .42rem; font: 900 var(--ds-type-label) / 1.2 var(--ds-font-ui); letter-spacing: .08em; text-transform: uppercase; }
.ds-status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.ds-status--success { color: var(--ds-success); }
.ds-status--error { color: var(--ds-error); }
.ds-status--clue { color: var(--ds-clue); }
.ds-status--disabled { color: var(--ds-disabled); box-shadow: none; }
.ds-dropzone { min-height: 5.5rem; display: grid; place-items: center; padding: var(--ds-space-4); border: 2px dashed rgba(99,56,31,.42); border-radius: var(--ds-radius-md); background: rgba(128,79,42,.06); transition: border-color var(--ds-duration-fast) ease, background var(--ds-duration-fast) ease, transform var(--ds-duration-fast) ease; }
.ds-dropzone.is-dragover { border-color: var(--ds-ember-600); background: rgba(217,106,47,.10); transform: scale(1.008); }

/* Layout primitives */
.ds-stack { display: flex; flex-direction: column; gap: var(--ds-stack-gap, var(--ds-space-4)); }
.ds-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-cluster-gap, var(--ds-space-3)); }
.ds-grid { display: grid; grid-template-columns: repeat(var(--ds-grid-cols, 2), minmax(0, 1fr)); gap: var(--ds-grid-gap, var(--ds-space-4)); }
.ds-readable { width: min(100%, var(--ds-content-sm)); }

/* Common effects */
.ds-depth-soft { box-shadow: var(--ds-shadow-soft); }
.ds-depth-panel { box-shadow: var(--ds-shadow-panel); }
.ds-glow-ember { box-shadow: var(--ds-glow-ember); }
.ds-glow-fire { box-shadow: var(--ds-glow-fire); }
.ds-enter { animation: dsPanelEnter var(--ds-duration-medium) var(--ds-ease-natural) both; }
.ds-ember-dot { width: .32rem; height: .32rem; border-radius: 50%; background: var(--ds-fire-300); box-shadow: 0 0 10px var(--ds-ember-600); }
@keyframes dsPanelEnter { from { opacity: 0; transform: translateY(.45rem) scale(.995); } to { opacity: 1; transform: none; } }

/* Keyboard focus: visible, high-contrast, and independent from material. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ds-focus);
  outline-offset: 3px;
}

/* Responsive behavior: composition may change, components remain legible. */
@media (max-width: 900px) {
  :root { --ds-page-gutter: clamp(.875rem, 4vw, 2rem); }
  .ds-panel--primary { padding: clamp(1.25rem, 4vw, 2rem); border-radius: var(--ds-radius-lg); }
  .ds-panel--stats { border-radius: var(--ds-radius-lg); }
  .ds-grid { --ds-grid-cols: 1; }
  .ds-modal-backdrop { align-items: end; padding-bottom: max(var(--ds-page-gutter), env(safe-area-inset-bottom)); }
  .ds-panel--modal { width: 100%; max-height: 88svh; border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0; }
}
@media (max-width: 560px) {
  .btn, .ds-btn { min-height: 44px; }
  .ds-btn--icon { min-width: 44px; width: 44px; height: 44px; }
  .ds-tabs { display: grid; grid-template-columns: 1fr; }
  [data-tooltip]::after { max-width: min(16rem, 86vw); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  :root { --ds-focus: #ffe4ad; }
  .ds-panel, .btn, .ds-btn, .ds-input, .ds-select, .ds-textarea { border-width: 2px; }
}