/* ============================================================================
   Reiderstad Invest — web design tokens + component styles
   Generated from references/design.md (the machine-readable token contract).
   Light theme is the canonical environment; [data-theme="dark"] inverts it for
   hero surfaces and the footer. Do not hand-edit hexes — change design.md first.
   ============================================================================ */

/* ---- Light theme (canonical / :root) ---- */
:root {
  --bg:            #F4F4F4;
  --surface-1:     #FFFFFF;
  --surface-2:     #EBEBEB;
  --fg:            #2D2D2D;
  --muted-strong:  #4A4A4A;
  --muted:         #7A7A7A;
  --hairline:      rgba(45, 45, 45, 0.10);
  --accent:        #D4A800;          /* readable gold for text/links/metrics on light */
  --accent-bright: #FDCA00;          /* reserved for large display moments */
  --accent-deep:   #8A6D00;          /* ultra-restrained accent on white cards */
  --on-accent:     #1A1A1A;          /* text that sits on an accent fill */
  --danger:        #B84A2C;

  /* CTA pair — tone-based, not gold. Primary = Ink Black fill; secondary =
     stone grey + hairline + backdrop-blur. Inverts under [data-theme="dark"]. */
  --btn-primary-bg:         #1A1A1A;
  --btn-primary-bg-hover:   #2D2D2D;
  --btn-primary-fg:         #F4F4F4;
  --btn-primary-border:     transparent;
  --btn-secondary-bg:       #EBEBEB;
  --btn-secondary-bg-hover: #E2E2E2;
  --btn-secondary-fg:       #2D2D2D;
  --btn-secondary-border:   rgba(45, 45, 45, 0.10);
  --btn-secondary-blur:     10px;     /* theme-agnostic glass over hero imagery */

  --font-display:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     16px;
}

/* ---- Dark theme (hero surfaces, footer) ---- */
[data-theme="dark"] {
  --bg:            #1A1A1A;
  --surface-1:     #252525;
  --surface-2:     #141414;
  --fg:            #F4F4F4;
  --muted-strong:  #C8C8C8;
  --muted:         #8A8A8A;
  --hairline:      rgba(244, 244, 244, 0.10);
  --accent:        #FDCA00;          /* bright gold reads correctly on dark */
  --danger:        #C95A3A;

  /* CTA pair inverts on dark: primary → Soft Stone fill; secondary → translucent
     "stone glass" that carries over photographic hero backgrounds. */
  --btn-primary-bg:         #F4F4F4;
  --btn-primary-bg-hover:   #FFFFFF;
  --btn-primary-fg:         #1A1A1A;
  --btn-primary-border:     transparent;
  --btn-secondary-bg:       rgba(244, 244, 244, 0.10);
  --btn-secondary-bg-hover: rgba(244, 244, 244, 0.18);
  --btn-secondary-fg:       #F4F4F4;
  --btn-secondary-border:   rgba(244, 244, 244, 0.22);
}

/* ---- Base ---- */
body { font-family: var(--font-body); color: var(--fg); }

::selection { background: var(--accent); color: var(--on-accent); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Visible focus for keyboard users (design.md a11y: 2px accent outline, 2px offset) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

img { display: block; max-width: 100%; }

/* ============================================================================
   Components — recipes from design.md §Components, with interaction states.
   ============================================================================ */

/* ---- Button (primary / secondary / ghost) ---- */
.ri-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 180ms ease, color 180ms ease,
              border-color 180ms ease, transform 80ms ease;
}
.ri-btn--sm { padding: 9px 16px; font-size: 13px; }

/* Primary — near-solid Ink Black fill (Soft Stone on dark). Hover lifts the tone;
   gold is never a button fill. */
.ri-btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-border);
}
.ri-btn--primary:hover  { background: var(--btn-primary-bg-hover); }
.ri-btn--primary:active { transform: translateY(1px); }

/* Secondary — stone fill with a hairline border and a faint backdrop-blur sheen.
   On dark surfaces the tokens invert to a translucent "stone glass" that reads
   over photographic hero backgrounds. */
.ri-btn--secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  border-color: var(--btn-secondary-border);
  -webkit-backdrop-filter: blur(var(--btn-secondary-blur)) saturate(1.1);
  backdrop-filter: blur(var(--btn-secondary-blur)) saturate(1.1);
}
.ri-btn--secondary:hover  { background: var(--btn-secondary-bg-hover); }
.ri-btn--secondary:active { transform: translateY(1px); }

.ri-btn--ghost {
  background: transparent;
  color: var(--muted-strong);
  border-color: transparent;
  padding: 12px 16px;
}
.ri-btn--ghost:hover  { color: var(--fg); }
.ri-btn--ghost:active { transform: translateY(1px); }

.ri-btn:disabled,
.ri-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.ri-btn__icon { display: inline-flex; align-items: center; }

/* ---- Tag ---- */
.ri-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted-strong);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  white-space: nowrap;
}
.ri-tag--accent {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* ---- Metric ---- */
.ri-metric { display: grid; gap: 8px; }
.ri-metric__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.ri-metric__value--accent { color: var(--accent); }
.ri-metric__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- Card ---- */
.ri-card {
  background: var(--surface-1);
  color: var(--fg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 24px;
}

/* ---- Input ---- */
.ri-field { display: grid; gap: 8px; }
.ri-field__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ri-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}
.ri-input::placeholder { color: var(--muted); }
.ri-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============================================================================
   Responsive — collapse the 96px section gutters and multi-column grids below
   the md breakpoint (design.md §Layout: fold to single column, don't shrink-fit).
   The views use inline styles, so these are scoped overrides by section.
   ============================================================================ */
@media (max-width: 860px) {
  header > div { padding-left: 24px !important; padding-right: 24px !important; }
  header nav { gap: 18px !important; }
  section, footer { padding-left: 24px !important; padding-right: 24px !important; }
  /* Fold two- and three-column content grids to a single column */
  section [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  header nav button:not(.ri-btn) { display: none; }   /* keep logo + CTA on small screens */
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* ---- Motion preference (design.md §Motion: respect reduced-motion) ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}