/* ===================================================================
   Outskirts — design tokens
   Browser-first roguelite · SVG-first asset system
   Prefix: --osk-*   ·   hex primary value, OKLCH noted alongside
   =================================================================== */

:root {

  /* --- Surfaces --- */
  --osk-bg:                        #0E0C0A;  /* oklch(0.156 0.0054 67.4)  ·  Page / behind-everything backdrop (Ash 950) */
  --osk-surface:                   #221D16;  /* oklch(0.234 0.0150 76.1)  ·  Default card & panel surface (Ash 800) */
  --osk-surface-raised:            #2E281F;  /* oklch(0.280 0.0181 77.9)  ·  Raised / hovered surface (Ash 700) */
  --osk-surface-sunken:            #15120E;  /* oklch(0.184 0.0093 75.0)  ·  Inset wells, track backgrounds (Ash 900) */
  --osk-surface-overlay:           #1B1712;  /* oklch(0.208 0.0115 73.3)  ·  Tooltips, menus, modal sheets (Ash 850) */

  /* --- Text / ink --- */
  --osk-text:                      #E8DFCC;  /* oklch(0.906 0.0272 85.7)  ·  Primary body & label text (Bone 100) */
  --osk-text-strong:               #F4EEE0;  /* oklch(0.950 0.0197 87.5)  ·  Headings, emphasised values (Bone 50) */
  --osk-text-muted:                #B6AB93;  /* oklch(0.744 0.0357 86.3)  ·  Secondary / supporting text (Bone 300) */
  --osk-text-faint:                #8A7F6B;  /* oklch(0.601 0.0321 82.5)  ·  Captions, meta, disabled labels (Bone 500) */

  /* --- Borders --- */
  --osk-border:                    #3C342A;  /* oklch(0.330 0.0204 73.2)  ·  Default 1px structural border (Ash 600) */
  --osk-border-strong:             #564B3C;  /* oklch(0.419 0.0280 75.4)  ·  Emphasised / focused border (Ash 500) */

  /* --- Accents --- */
  --osk-primary:                   #D85A2C;  /* oklch(0.622 0.1693 39.3)  ·  Interactive accent — buttons, selection, links (Ember 500) */
  --osk-primary-hover:             #E8895C;  /* oklch(0.722 0.1309 45.4)  ·  Primary hover / lit state (Ember 300) */
  --osk-primary-pressed:           #B8451E;  /* oklch(0.543 0.1574 38.0)  ·  Primary pressed / active (Ember 600) */
  --osk-secondary:                 #E7A93C;  /* oklch(0.775 0.1405 77.5)  ·  Daylight, highlights, loot value (Amber 400) */
  --osk-secondary-strong:          #F0C064;  /* oklch(0.832 0.1230 81.9)  ·  Brightest amber accent (Amber 300) */

  /* --- Semantic status --- */
  --osk-danger:                    #B5392C;  /* oklch(0.525 0.1624 29.5)  ·  Loss, destructive action, error (Blood 500) */
  --osk-danger-text:               #C9483A;  /* oklch(0.577 0.1668 29.3)  ·  Danger text & icons on dark (Blood 400) */
  --osk-danger-surface:            #8E3216;  /* oklch(0.447 0.1310 36.8)  ·  Danger tile washes & fills (Rust 700) */
  --osk-danger-deep:               #7E2017;  /* oklch(0.396 0.1302 29.5)  ·  Deepest lethal-zone fill (Blood 700) */
  --osk-success:                   #9FB23E;  /* oklch(0.726 0.1413 118.0)  ·  Reward secured, run success (Toxic 400) */
  --osk-success-deep:              #6E7E26;  /* oklch(0.562 0.1132 119.1)  ·  Success border / deep variant (Toxic 600) */
  --osk-warning:                   #E7A93C;  /* oklch(0.775 0.1405 77.5)  ·  Caution, dusk timer, investigate (Amber 400) */
  --osk-warning-strong:            #F0C064;  /* oklch(0.832 0.1230 81.9)  ·  Acute warning emphasis (Amber 300) */
  --osk-info:                      #5E7686;  /* oklch(0.553 0.0376 237.5)  ·  Night, system, neutral info (Steel 400) */
  --osk-info-text:                 #7E96A6;  /* oklch(0.660 0.0362 237.3)  ·  Info text & icons on dark (Steel 300) */
  --osk-info-deep:                 #3E5260;  /* oklch(0.428 0.0340 239.1)  ·  Info border / deep variant (Steel 600) */

  /* --- Resource & meter colors --- */
  --osk-resource-loot:             #E7A93C;  /* oklch(0.775 0.1405 77.5)  ·  Loot & consumables category (Amber) */
  --osk-resource-threat:           #9FB23E;  /* oklch(0.726 0.1413 118.0)  ·  Infected / threat category (Toxic) */
  --osk-resource-action:           #D85A2C;  /* oklch(0.622 0.1693 39.3)  ·  Player-action category (Ember) */
  --osk-resource-vitals:           #C9483A;  /* oklch(0.577 0.1668 29.3)  ·  Health / vitals meter (Blood) */
  --osk-resource-stamina:          #5E7686;  /* oklch(0.553 0.0376 237.5)  ·  Stamina meter (Steel) */
  --osk-resource-night:            #5E7686;  /* oklch(0.553 0.0376 237.5)  ·  Night / cold systems (Steel) */

  /* --- Tile / card / cell states --- */
  --osk-state-selectable:          #8A7F6B;  /* oklch(0.601 0.0321 82.5)  ·  Selectable affordance — dashed bone outline */
  --osk-state-selected:            #D85A2C;  /* oklch(0.622 0.1693 39.3)  ·  Selected — solid ember border + glow */
  --osk-state-locked:              #564B3C;  /* oklch(0.419 0.0280 75.4)  ·  Locked / not yet available — muted */
  --osk-state-disabled:            #2E281F;  /* oklch(0.280 0.0181 77.9)  ·  Disabled / inert */
  --osk-state-exhausted:           #564B3C;  /* oklch(0.419 0.0280 75.4)  ·  Exhausted / spent this run */
  --osk-state-danger:              #B5392C;  /* oklch(0.525 0.1624 29.5)  ·  Danger tile / cell */
  --osk-state-reward:              #E7A93C;  /* oklch(0.775 0.1405 77.5)  ·  Reward tile / cell */
  --osk-state-completed:           #7E96A6;  /* oklch(0.660 0.0362 237.3)  ·  Completed / cleared (steel) */
  --osk-focus-ring:                #E8895C;  /* oklch(0.722 0.1309 45.4)  ·  Keyboard focus ring color (Ember 300) */

  /* --- Radii --- */
  --osk-radius-sm: 3px;  /* Chips, pips, inputs */
  --osk-radius-md: 5px;  /* Buttons, small cards */
  --osk-radius-lg: 8px;  /* Panels, tiles, modals */
  --osk-radius-pill: 999px;  /* Pills, meters, rings */

  /* --- Spacing (4px base) --- */
  --osk-space-1: 4px;  /* Base unit */
  --osk-space-2: 8px;
  --osk-space-3: 12px;
  --osk-space-4: 16px;
  --osk-space-6: 24px;
  --osk-space-8: 32px;
  --osk-space-12: 48px;  /* Section padding */

  /* --- Elevation --- */
  --osk-elevation-0: inset 0 1px 0 rgba(244,238,224,.05);  /* Flat — border carries structure */
  --osk-elevation-1: 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(244,238,224,.06);  /* Raised card / popover */
  --osk-elevation-2: 0 12px 34px rgba(0,0,0,.6), 0 0 0 1px rgba(216,90,44,.25);  /* Overlay / modal */

  /* --- Focus rings --- */
  --osk-focus-ring-width: 3px;  /* Focus ring thickness */
  --osk-focus-ring-shadow: 0 0 0 3px rgba(232,137,92,.45);  /* Drop-in focus box-shadow */

  /* --- Motion timings & easing --- */
  --osk-motion-instant: 80ms;  /* State snaps (aggro, pip) */
  --osk-motion-fast: 120ms;  /* Tile select, hover */
  --osk-motion-base: 240ms;  /* Drops, fades, transitions */
  --osk-motion-slow: 1400ms;  /* Loop period (aggro pulse) */
  --osk-ease-out: cubic-bezier(.2,.8,.2,1);  /* Default entrance ease */
  --osk-ease-in-out: cubic-bezier(.4,0,.2,1);  /* Symmetric ease */
}

/* ===================================================================
   State treatment classes — apply to .osk-tile / .osk-card / .osk-cell
   Each state pairs COLOR with a second cue: border style, pip, icon,
   pattern or opacity — so state reads without color perception.
   =================================================================== */

.osk-cell {
  position: relative;
  background: var(--osk-surface);
  border: 1px solid var(--osk-border);
  border-radius: var(--osk-radius-lg);
  color: var(--osk-text);
  transition: border-color var(--osk-motion-fast) var(--osk-ease-out),
              box-shadow var(--osk-motion-fast) var(--osk-ease-out),
              transform var(--osk-motion-fast) var(--osk-ease-out);
}

/* hover / focus — lit border + ember halo (+ keyboard focus ring) */
.osk-cell:hover,
.osk-cell.is-hover        { border-color: var(--osk-primary); background: var(--osk-surface-raised);
                            box-shadow: 0 0 0 3px rgba(216,90,44,.18); }
.osk-cell:focus-visible   { outline: none; box-shadow: var(--osk-focus-ring-shadow); border-color: var(--osk-primary); }

/* selectable — dashed bone outline + ring pip (shape cue) */
.osk-cell.is-selectable   { border-style: dashed; border-color: var(--osk-state-selectable); }

/* selected — 2px solid ember + glow + filled check pip */
.osk-cell.is-selected     { border-width: 2px; border-color: var(--osk-primary);
                            box-shadow: 0 0 22px rgba(216,90,44,.30); transform: scale(1.015); }

/* locked — muted, lock icon, not interactive */
.osk-cell.is-locked       { border-color: var(--osk-border); color: var(--osk-text-faint); opacity: .92; cursor: not-allowed; }

/* disabled — inert, heavy de-emphasis */
.osk-cell.is-disabled     { opacity: .5; pointer-events: none; filter: grayscale(.3); }

/* exhausted / spent — diagonal hatch pattern + faint */
.osk-cell.is-exhausted    { color: var(--osk-text-faint); opacity: .8;
                            background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(86,75,60,.18) 5px 6px); }

/* danger — blood border + alert triangle pip */
.osk-cell.is-danger       { border-color: var(--osk-danger); background: linear-gradient(180deg,#2a130f,#1c0f0c); }

/* reward — amber border + star pip */
.osk-cell.is-reward       { border-color: var(--osk-secondary); background: linear-gradient(180deg,#2a2110,#1d160c); }

/* completed — steel border + check pip (distinct hue from selected) */
.osk-cell.is-completed    { border-color: var(--osk-info); background: linear-gradient(180deg,#16201f,#121917); color: var(--osk-text-muted); }

/* warning — amber border + dashed emphasis */
.osk-cell.is-warning      { border-color: var(--osk-warning); box-shadow: 0 0 0 3px rgba(231,169,60,.15); }

/* error — blood border + halo + X pip */
.osk-cell.is-error        { border-color: var(--osk-danger); box-shadow: 0 0 0 3px rgba(181,57,44,.15); }

/* loading — pulsing border, awaiting seed/data */
.osk-cell.is-loading      { border-color: var(--osk-border-strong); }
.osk-cell.is-loading::after{ content:""; position:absolute; inset:0; border-radius:inherit;
                             background: linear-gradient(90deg,transparent,rgba(244,238,224,.06),transparent);
                             animation: osk-shimmer 1.4s linear infinite; }

@keyframes osk-shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
@keyframes osk-pulse-ring { 0%,100%{box-shadow:0 0 0 0 rgba(181,57,44,.55)} 50%{box-shadow:0 0 0 6px rgba(181,57,44,0)} }

@media (prefers-reduced-motion: reduce){
  .osk-cell, .osk-cell.is-selected { transition: none; transform: none; }
  .osk-cell.is-loading::after, [data-osk-anim] { animation: none !important; }
}