/*
  TRACCE — REUSABLE 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-background-950: var(--skin-c001);
  --ds-background-900: var(--skin-c002);
  --ds-shadow-900: var(--skin-c003);
  --ds-surface-primary-900: var(--skin-c004);
  --ds-surface-primary-800: var(--skin-c005);
  --ds-surface-primary-650: var(--skin-c006);
  --ds-surface-secondary-800: var(--skin-c007);
  --ds-surface-secondary-650: var(--skin-c008);
  --ds-surface-secondary-500: var(--skin-c009);
  --ds-surface-secondary-300: var(--skin-c010);
  --ds-text-100: var(--skin-c011);
  --ds-text-250: var(--skin-c012);
  --ds-text-400: var(--skin-c013);
  --ds-muted-100: var(--skin-c014);
  --ds-muted-400: var(--skin-c015);
  --ds-surface-tertiary-700: var(--skin-c016);
  --ds-surface-tertiary-600: var(--skin-c017);
  --ds-accent-secondary-700: var(--skin-c018);
  --ds-accent-secondary-600: var(--skin-c019);
  --ds-accent-secondary-450: var(--skin-c020);
  --ds-accent-600: var(--skin-c021);
  --ds-accent-450: var(--skin-c022);
  --ds-highlight-300: var(--skin-c023);
  --ds-highlight-150: var(--skin-c024);
  --ds-success-tone-700: var(--skin-c025);
  --ds-success-tone-500: var(--skin-c026);

  /* Semantic colors */
  --ds-success: var(--skin-c027);
  --ds-success-soft: var(--skin-c028);
  --ds-error: var(--skin-c029);
  --ds-error-soft: var(--skin-c030);
  --ds-clue: var(--skin-c031);
  --ds-focus: var(--skin-c032);
  --ds-disabled: var(--skin-c033);
  --ds-overlay: var(--skin-c034);
  --ds-overlay-soft: var(--skin-c035);

  /* Text on materials */
  --ds-text-on-surface-secondary: var(--skin-c036);
  --ds-text-on-surface-secondary-muted: var(--skin-c037);
  --ds-text-on-surface-primary: var(--skin-c038);
  --ds-text-on-surface-primary-muted: var(--skin-c039);
  --ds-text-on-dark: var(--skin-c011);
  --ds-text-on-dark-muted: var(--skin-c013);
  --ds-text-danger: var(--skin-c040);

  /* Typography: local/system only — no remote dependency */
  --ds-font-display: system-ui, sans-serif;
  --ds-font-reading: system-ui, sans-serif;
  --ds-font-ui: system-ui, 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-panel: 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 var(--skin-c041);
  --ds-shadow-panel: 0 22px 58px var(--skin-c042);
  --ds-shadow-heavy: 0 28px 72px var(--skin-c043);
  --ds-shadow-inset-light: inset 0 1px var(--skin-c044);
  --ds-glow-accent: 0 0 22px var(--skin-c045);
  --ds-glow-highlight: 0 0 30px var(--skin-c046);
  --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: var(--skin-c047);
  --ink-2: var(--ds-surface-secondary-800);
  --ink-3: var(--ds-surface-secondary-650);
  --text: var(--ds-text-100);
  --text-2: var(--ds-text-400);
  --accent-secondary: var(--ds-accent-secondary-600);
  --accent: var(--ds-accent-600);
  --accent-hot: var(--ds-highlight-300);
  --surface-secondary-hi: var(--ds-surface-secondary-300);
  --rope: var(--skin-c048);
  --surface-primary: var(--ds-surface-primary-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-background-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: var(--skin-c049); color: var(--skin-c050); }

/* 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-surface-secondary {
  color: var(--ds-text-on-surface-secondary);
  background-color: var(--skin-c051);
  background-image: linear-gradient(var(--skin-c052), var(--skin-c053)), url("../../theme/assets/surface-primary.jpg");
  background-position: center;
  background-size: cover;
}
.ds-material-surface-primary {
  color: var(--ds-text-on-surface-primary);
  background-color: var(--ds-surface-primary-800);
  background-image: linear-gradient(var(--skin-c054), var(--skin-c055)), url("../../theme/assets/surface-secondary.jpg");
  background-position: center;
  background-size: cover;
}
.ds-material-wood {
  color: var(--ds-text-100);
  background-color: var(--skin-c056);
  background-image: linear-gradient(90deg, var(--skin-c057), transparent 14%, var(--skin-c058) 48%, transparent 76%, var(--skin-c059)), repeating-linear-gradient(2deg, var(--skin-c060) 0 1px, transparent 1px 7px);
}
.ds-material-text {
  color: var(--skin-c061);
  background: linear-gradient(145deg, var(--skin-c062), var(--skin-c063) 58%, var(--skin-c064));
}
.ds-material-fiber {
  color: var(--skin-c065);
  background-color: var(--skin-c066);
  background-image: repeating-linear-gradient(88deg, var(--skin-c067) 0 1px, transparent 1px 5px), repeating-linear-gradient(2deg, var(--skin-c068) 0 1px, transparent 1px 6px);
}
.ds-material-background { color: var(--ds-text-100); background: linear-gradient(145deg, var(--skin-c069), var(--skin-c070)); }
.ds-material-accent-secondary { color: var(--skin-c071); background: linear-gradient(145deg, var(--skin-c072), var(--skin-c073)); }
.ds-material-muted { color: var(--skin-c074); background: linear-gradient(145deg, var(--skin-c075), var(--skin-c076)); }

/* Reusable panels */
.ds-panel {
  position: relative;
  border: 1px solid var(--skin-c077);
  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-panel); }
.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: var(--skin-c078); box-shadow: var(--ds-shadow-heavy), var(--ds-glow-accent); }

/* Buttons. Primary = accent/surface; 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 var(--skin-c079);
  border-radius: var(--ds-radius-xs);
  background: linear-gradient(180deg, var(--skin-c080), var(--skin-c081)), var(--skin-c082);
  color: var(--skin-c083);
  box-shadow: 0 7px 16px var(--skin-c084), inset 0 1px var(--skin-c085), inset 0 -2px var(--skin-c086);
  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 var(--skin-c087);
  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 var(--skin-c088), var(--ds-glow-accent); }
.btn:active:not(:disabled),
.ds-btn:active:not(:disabled) { transform: translateY(0) scale(.985); filter: brightness(.98); }
.btn.ghost,
.ds-btn--secondary { background: var(--skin-c089); color: var(--skin-c090); text-shadow: none; border-color: var(--skin-c091); box-shadow: inset 0 1px var(--skin-c092); }
.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, var(--skin-c093), var(--skin-c094)), var(--skin-c095); border-color: var(--skin-c096); 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 var(--skin-c097); }
.ds-frame-incised { box-shadow: inset 0 0 0 1px var(--skin-c098), inset 0 0 0 5px var(--skin-c099); }
.ds-frame-burnt { border: 1px solid var(--skin-c100); box-shadow: inset 0 0 18px var(--skin-c101), 0 10px 28px var(--skin-c102); }
.ds-frame-rope { outline: 4px solid var(--skin-c103); outline-offset: 4px; }
.ds-frame-surface-primary { border-color: var(--skin-c104); box-shadow: var(--ds-shadow-panel), inset 0 1px var(--skin-c105), inset 0 -8px 20px var(--skin-c106); }
.ds-frame-wood { border: 5px solid var(--skin-c107); box-shadow: 0 8px 22px var(--skin-c108), inset 0 1px var(--skin-c109); }

/* Pictograms: cave-mark character, modern UI clarity. */
.ds-pictogram { display: inline-grid; place-items: center; color: var(--ds-accent-secondary-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-accent-600); filter: drop-shadow(0 0 6px var(--skin-c110)); }

/* 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 var(--skin-c111);
  border-radius: var(--ds-radius-sm);
  background: var(--skin-c112);
  color: var(--ds-text-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-surface-secondary); background: linear-gradient(var(--skin-c113), var(--skin-c114)), url("../../theme/assets/surface-primary.jpg") center / cover; }
.ds-dialog--important { border-color: var(--skin-c115); box-shadow: var(--ds-shadow-heavy), var(--ds-glow-highlight); }
.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: var(--skin-c116); box-shadow: var(--ds-shadow-panel), var(--ds-glow-accent); }

/* 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-surface-secondary-muted); }
.ds-input,
.ds-select,
.ds-textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--skin-c117);
  border-radius: var(--ds-radius-sm);
  padding: .68rem .78rem;
  background: var(--skin-c118);
  color: var(--skin-c119);
  box-shadow: inset 0 1px 3px var(--skin-c120);
}
.ds-textarea { min-height: 7rem; resize: vertical; }
.ds-check,
.ds-radio { width: 1.1rem; height: 1.1rem; accent-color: var(--ds-accent-secondary-600); }
.ds-progress { width: 100%; height: .72rem; overflow: hidden; border: 1px solid var(--skin-c121); border-radius: var(--ds-radius-pill); background: var(--skin-c122); }
.ds-progress > span { display: block; height: 100%; width: var(--progress, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--ds-accent-secondary-600), var(--ds-accent-600), var(--ds-highlight-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 var(--skin-c123); color: var(--skin-c124); background: var(--skin-c125); 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 var(--skin-c126); border-radius: var(--ds-radius-sm); padding: .58rem .78rem; background: var(--skin-c125); color: var(--ds-text-on-surface-secondary); font-weight: 900; }
.ds-tab[aria-selected="true"], .ds-tab.active { border-color: var(--ds-accent-secondary-600); box-shadow: inset 0 -2px var(--ds-accent-secondary-600); color: var(--ds-accent-secondary-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 var(--skin-c127); border-radius: var(--ds-radius-md); background: var(--skin-c128); 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-accent-600); background: var(--skin-c129); 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-accent { box-shadow: var(--ds-glow-accent); }
.ds-glow-highlight { box-shadow: var(--ds-glow-highlight); }
.ds-enter { animation: dsPanelEnter var(--ds-duration-medium) var(--ds-ease-natural) both; }
.ds-accent-dot { width: .32rem; height: .32rem; border-radius: 50%; background: var(--ds-highlight-300); box-shadow: 0 0 10px var(--ds-accent-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: var(--skin-c130); }
  .ds-panel, .btn, .ds-btn, .ds-input, .ds-select, .ds-textarea { border-width: 2px; }
}