/* FAROUT design tokens — Life Beyond Boundaries */
:root {
  /* Core neutrals — warm, sun-faded */
  --cream: #F1E8D2;          /* page / brand background, matches logo */
  --cream-deep: #E8DCBE;     /* hero washes */
  --paper: #FBF6EA;          /* content surface */
  --paper-2: #F7F0DD;        /* subtle alt rows */
  --ink: #1B1B17;            /* primary text */
  --ink-2: #4A4A40;          /* secondary text */
  --ink-3: #87826F;          /* tertiary / meta */
  --rule: #1B1B1722;         /* hairline */
  --rule-soft: #1B1B1714;

  /* Brand */
  --forest: #2F4A2A;
  --forest-deep: #1F3A1B;
  --forest-soft: #2F4A2A14;

  /* Accents — low-chroma, matched lightness */
  --clay: #C76A4A;
  --sky:  #6E91A8;
  --sage: #8AA078;
  --ember: #D87238;          /* burnt orange — sparingly */

  /* Text-safe accents (D-082) — the raw accents above FAIL 4.5:1 as type on any
     light surface. Use these whenever an accent is the TEXT or a meaningful icon.
     Each clears 4.5:1 on --cream-deep, the darkest light surface we ship. */
  --clay-text:  #934E37;     /* 4.55 on cream-deep · 5.08 on cream */
  --sky-text:   #4C6474;     /* 4.56 · 5.09 */
  --sage-text:  #58664D;     /* 4.50 · 5.03 */
  --ember-text: #934E26;     /* 4.59 · 5.13 */

  /* ---------------------------------------------------------- */
  /* Semantic alias layer — V2 dark-mode swap is a one-line job */
  /* Refer to these in NEW work; keep hue tokens for legacy.    */
  /* ---------------------------------------------------------- */

  /* Surfaces */
  --color-surface:          var(--cream);     /* page bg */
  --color-surface-strong:   var(--cream-deep);/* hero washes */
  --color-surface-card:     var(--paper);     /* cards / sheets */
  --color-surface-card-alt: var(--paper-2);   /* alt rows / hover bg */

  /* Ink */
  --color-ink:        var(--ink);
  --color-ink-muted:  var(--ink-2);
  --color-ink-meta:   var(--ink-3);
  --color-ink-invert: var(--cream);           /* on dark surfaces */

  /* Lines */
  --color-rule:       var(--rule);
  --color-rule-soft:  var(--rule-soft);

  /* Brand & action */
  --color-brand:        var(--forest);        /* primary brand */
  --color-brand-strong: var(--forest-deep);
  --color-brand-tint:   var(--forest-soft);
  --color-action:       var(--ember);         /* primary action / "now" */
  --color-attention:    var(--clay);          /* warm highlight */
  --color-info:         var(--sky);           /* informational */
  --color-success:      var(--sage);

  /* Field-Note topic mapping (locked product language → tokens) */
  --color-topic-access:  var(--color-info);
  --color-topic-weather: var(--color-action);
  --color-topic-tip:     var(--color-attention);
  --color-topic-skip:    var(--color-brand);
  --color-topic-hazard:  #B33A28;             /* keeps a hard danger signal even in light theme */

  /* Type */
  --f-display: "Archivo Black", "Archivo", system-ui, sans-serif;
  --f-sans:    "Archivo", system-ui, sans-serif;
  --f-script:  "Caveat Brush", "Caveat", cursive;
  --f-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Radii */
  --r-1: 6px;
  --r-2: 12px;
  --r-3: 20px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--f-sans);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Striped placeholder for "drop real photo here" */
.ph-photo {
  background:
    repeating-linear-gradient(135deg,
      #1B1B1710 0 10px, transparent 10px 22px),
    var(--cream-deep);
  color: var(--ink-2);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .04em;
  display: flex;
  align-items: flex-end;
  padding: 12px;
}
.ph-photo[data-tone="forest"] { background:
  repeating-linear-gradient(135deg, #FFFFFF14 0 10px, transparent 10px 22px),
  var(--forest); color: #F1E8D2; }
.ph-photo[data-tone="ink"] { background:
  repeating-linear-gradient(135deg, #FFFFFF18 0 10px, transparent 10px 22px),
  #2A2A23; color: #F1E8D2; }
.ph-photo[data-tone="clay"] { background:
  repeating-linear-gradient(135deg, #1B1B1714 0 10px, transparent 10px 22px),
  #D9967A; color: #2A1A10; }
.ph-photo[data-tone="sky"]  { background:
  repeating-linear-gradient(135deg, #1B1B1714 0 10px, transparent 10px 22px),
  #A6BDC9; color: #1B2A33; }
.ph-photo[data-tone="sage"] { background:
  repeating-linear-gradient(135deg, #1B1B1714 0 10px, transparent 10px 22px),
  #B6C5A4; color: #1B2A14; }

/* paper-grain — subtle texture for cream sections */
.paper-grain {
  position: relative;
}
.paper-grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(27,27,23,.04) 1px, transparent 1.2px),
    radial-gradient(rgba(27,27,23,.03) 1px, transparent 1.2px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: multiply;
  opacity: .55;
}

/* ------------------------------------------------------------------ */
/* CONTRAST RULES (D-082) — audited, not guessed                      */
/*                                                                     */
/* Accent AS FILL: keep the raw hue, set text to var(--ink).           */
/*   ink/clay 4.60 · ink/sky 5.16 · ink/sage 6.07 · ink/ember 5.25     */
/*   NEVER cream on an accent fill — cream/ember is 2.70, a failure.   */
/*   cream text is only legal on --forest (8.07), --forest-deep        */
/*   (10.25) and --ink (14.16).                                        */
/*                                                                     */
/* Accent AS TEXT/ICON on a light surface: use the -text variant.      */
/*                                                                     */
/* Accent fills need no 3:1 boundary of their own — every accent fill  */
/* in FAROUT carries a 1.5px solid var(--ink) border, which supplies   */
/* the non-text contrast. Don't remove that border to "clean up" a     */
/* component; it is load-bearing for accessibility.                    */
/*                                                                     */
/* --ink-3 (3.16 on cream) is LARGE-TEXT ONLY: >=16px, or >=14px bold, */
/* or non-text. Body copy and anything under 16px uses --ink-2 (7.34). */
/* ------------------------------------------------------------------ */

/* Hairline divider */
.hr { height: 1px; background: var(--rule); border: 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-sans); font-weight: 600;
  font-size: 14px; line-height: 1;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer; transition: all .18s var(--ease);
  text-decoration: none;
}
.btn--primary { background: var(--forest); color: var(--cream); }
.btn--primary:hover { background: var(--forest-deep); }
.btn--ghost   { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.btn--ink     { background: var(--ink); color: var(--cream); }

/* Chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500;
  padding: 7px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: all .15s var(--ease);
  white-space: nowrap;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--ink); color: var(--cream); border-color: var(--ink);
}

/* Why-chip (D-106) — attribution label that is also a button. It sits in a
   vertical byline stack, so widening is free but growing 44px tall would put an
   invisible target over the author link above it or the Reactions row below.
   Real height instead of an overlay: 26px painted, 44px min-width, and a
   documented 2.5.8 (24x24) target rather than a booby-trapped 2.5.5 one. */
.why-chip {
  align-self: flex-start;
  min-width: 44px;
  min-height: 26px;
  border-radius: 999px;
}

/* Eyebrow / labels */.eyebrow {
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  color: var(--ink-3);
}

.script { font-family: var(--f-script); font-weight: 400; color: var(--forest); }


/* Place detail entrance */
@keyframes place-in {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}


/* Garage scan reticle sweep */
@keyframes gx-scan {
  0%   { top: 4px; opacity: .3; }
  50%  { top: calc(100% - 6px); opacity: 1; }
  100% { top: 4px; opacity: .3; }
}


/* Horizontal scroll rows hide their bar in all engines */
[style*="scrollbar-width: none"]::-webkit-scrollbar,
[style*="scrollbarWidth"]::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ------------------------------------------------------------------ */
/* ACCESSIBILITY BASELINE (D-082)                                     */
/* ------------------------------------------------------------------ */

/* Visible focus for keyboard users only. Never replace this with
   outline:none — if a component needs a different ring, override the
   color, not the existence. */
:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Ink-on-dark surfaces need the inverse ring to stay visible */
.on-ink :focus-visible,
[data-surface="ink"] :focus-visible { outline-color: var(--cream); }

/* Minimum hit target — scoped to ICON-ONLY controls, which is where the
   real failures are. Do NOT widen this to all buttons: chips and
   segmented controls are intentionally short and get their target from
   the row they sit in.
   Icon-only buttons are identifiable by carrying an aria-label with no
   text node, which they all do (that's also the a11y requirement). */
button[aria-label] { min-height: 44px; min-width: 44px; }
/* Escape hatch for an icon that sits inside an already-tappable row of
   44px or more — the row carries the target. */
button[aria-label].inline-affordance { min-height: 0; min-width: 0; }

/* Respect the user's motion setting. Remove the MOVEMENT, never the
   state change — a disabled button must still look disabled. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Sheets and toasts fade instead of sliding */
  [data-motion="slide"] { animation: none !important; transform: none !important; }
}

/* Screen-reader-only text for state that is otherwise carried by colour
   or position alone. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Links — defined even where the design has none yet, so user-added
   links never render browser-default blue. */
a { color: var(--forest); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--clay-text); }