@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 700;font-display:swap;src:url(https://smith912000.github.io/wild-programme/assets/fonts/files/46932d16807ab0f1.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212}
/* WILD design tokens. One source of truth for the hub, the companion apps and the graphics.
   Documented in DESIGN.md at the repo root. The WILD OS app imports this file into its Tailwind theme;
   the graphics renderer (wild/content/automation/render.js) copies the same values. */
:root {
  /* Night: the ground everything sits on */
  --wild-bg:         #06100E;
  --wild-bg-elev:    #0B1613;
  --wild-surface:    #11201C;
  --wild-surface-2:  #172B25;
  --wild-border:     rgba(237,239,230,.09);
  --wild-border-lit: rgba(77,184,162,.45);

  /* Text on night. dim and faint both pass 4.5:1 on --wild-bg */
  --wild-text:       #EDEFE6;
  --wild-dim:        rgba(237,239,230,.68);
  --wild-faint:      rgba(237,239,230,.5);
  --wild-on-gold:    #08130F;

  /* Threshold: indigo is the night, gold is the aperture */
  --wild-indigo:     #2F8F7C;   /* strokes, fills, borders. Not for body text */
  --wild-indigo-2:   #4DB8A2;   /* hover, icons, 3.5:1 on bg: large text only */
  --wild-indigo-3:   #9EDCCB;   /* indigo for text, 9:1 on bg */
  --wild-gold:       #D2825A;   /* primary action, labels, the aperture */
  --wild-gold-2:     #EBA37F;   /* hover, the lit aperture */

  /* Signals: one quiet hue each, used sparingly */
  --wild-ok:         #86B894;
  --wild-warn:       #E0A458;
  --wild-danger:     #E07A85;

  /* Type */
  --wild-serif: 'Cinzel', Georgia, 'Times New Roman', serif;
  --wild-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --wild-mono:  ui-monospace, 'SFMono-Regular', Menlo, Consolas, ui-monospace, SFMono-Regular, Menlo, monospace;
  --wild-track-label: .22em;   /* eyebrow and wordmark letter spacing */
  --wild-track-word:  .14em;

  /* Scale (rem): 12 13 14 16 18 22 28 36 48 64 */
  --wild-fs-xs: .75rem; --wild-fs-sm: .8125rem; --wild-fs-base: .875rem; --wild-fs-md: 1rem;
  --wild-fs-lg: 1.125rem; --wild-fs-xl: 1.375rem; --wild-fs-2xl: 1.75rem; --wild-fs-3xl: 2.25rem;
  --wild-fs-4xl: 3rem; --wild-fs-5xl: 4rem;

  /* Space (px, base 4) */
  --wild-s1: 4px; --wild-s2: 8px; --wild-s3: 12px; --wild-s4: 16px; --wild-s5: 24px;
  --wild-s6: 32px; --wild-s7: 48px; --wild-s8: 64px; --wild-s9: 96px;

  /* Shape */
  --wild-r-sm: 4px; --wild-r-md: 6px; --wild-r-lg: 8px; --wild-r-pill: 6px;

  /* Depth. Glow is for the one primary action on a screen, nothing else */
  --wild-shadow-card: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 3px rgba(0,0,0,.4);
  --wild-shadow-float: 0 18px 50px rgba(0,0,0,.5);
  --wild-glow-gold: 0 10px 34px -10px rgba(210,130,90,.55);

  /* Motion */
  --wild-ease: cubic-bezier(.16,1,.3,1);
  --wild-t-fast: .15s; --wild-t: .3s; --wild-t-slow: .6s;
}

/* Base, for the static pages. The app has its own reset via Tailwind. */
.wild-reset *, .wild-reset *::before, .wild-reset *::after { box-sizing: border-box; margin: 0; padding: 0; }
.wild-body { background: var(--wild-bg); color: var(--wild-text); font-family: var(--wild-sans); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* Eyebrow: the small gold label above a heading */
.wild-eyebrow { font-family: var(--wild-sans); font-size: var(--wild-fs-xs); font-weight: 700; letter-spacing: var(--wild-track-label);
  text-transform: uppercase; color: var(--wild-gold); }

/* Buttons. One gold per screen; everything else is ghost or quiet. */
.wild-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; min-height: 48px;
  border-radius: var(--wild-r-pill); font-family: var(--wild-sans); font-weight: 600; font-size: var(--wild-fs-md); line-height: 1.2;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform var(--wild-t) var(--wild-ease), background var(--wild-t), border-color var(--wild-t), color var(--wild-t); }
.wild-btn:hover { transform: translateY(-2px); }
.wild-btn-gold { background: var(--wild-gold); color: var(--wild-on-gold); box-shadow: var(--wild-glow-gold); }
.wild-btn-gold:hover { background: var(--wild-gold-2); color: var(--wild-on-gold); }
.wild-btn-ghost { border-color: var(--wild-border-lit); color: var(--wild-text); background: rgba(47,143,124,.08); }
.wild-btn-ghost:hover { border-color: var(--wild-indigo-2); background: rgba(47,143,124,.16); }
.wild-btn-quiet { color: var(--wild-dim); }
.wild-btn-quiet:hover { color: var(--wild-text); }
.wild-btn-sm { padding: 8px 16px; min-height: 36px; font-size: var(--wild-fs-sm); }
.wild-focus:focus-visible, .wild-btn:focus-visible { outline: 2px solid var(--wild-indigo-2); outline-offset: 3px; }

/* Card: the one surface */
.wild-card { background: linear-gradient(180deg, var(--wild-surface), var(--wild-bg-elev)); border: 1px solid var(--wild-border);
  border-radius: var(--wild-r-lg); box-shadow: var(--wild-shadow-card); }

/* Tag: a tiny uppercase pill */
.wild-tag { display: inline-block; font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--wild-r-pill); color: var(--wild-gold-2); border: 1px solid rgba(210,130,90,.3); background: rgba(210,130,90,.1); }

@media (prefers-reduced-motion: reduce) {
  .wild-btn, .wild-btn:hover { transition: none; transform: none; }
}