/* SOCIETY — Design Tokens (Light + Dark)
 * Single source of truth for color + type.
 * Import via: <link rel="stylesheet" href="/colors_and_type.css">
 */

/* Inter — served locally from /fonts (brand-supplied TTFs)
 * Using the Inter_24pt optical size as the default text cut.
 * Weights match the design system: 400 / 500 / 600 / 700 / 800.
 */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Inter_24pt-Regular.ttf')  format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/Inter_24pt-Italic.ttf')   format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Inter_24pt-Medium.ttf')   format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/Inter_24pt-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Inter_24pt-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; font-display: swap; src: url('../fonts/Inter_24pt-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Inter_24pt-Bold.ttf')     format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/Inter_24pt-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/Inter_28pt-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; font-display: swap; src: url('../fonts/Inter_28pt-ExtraBoldItalic.ttf') format('truetype'); }

/* Display-size cut — use via font-family:'Inter Display' for headings ≥ 28px */
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Inter_28pt-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/Inter_28pt-ExtraBold.ttf') format('truetype'); }

:root {
  /* ── Backgrounds ─────────────────────── */
  --bg-parchment: #F5EFE8;   /* app canvas — NEVER pure white */
  --bg-card:      #F8F4EE;   /* elevated surfaces */
  --bg-warm:      #EEE4D8;   /* alt card (Room alternating rows) */
  --bg-muted:     #EDE6DD;   /* disabled, skeletons */

  /* ── Foreground / text ───────────────── */
  --fg-cocoa:     #322E2C;   /* primary text — NEVER pure black */
  --fg-secondary: #413A36;
  --fg-muted:     #807772;   /* timestamps, captions */

  /* ── Borders ─────────────────────────── */
  --border-default: #E1D8CD;
  --border-subtle:  #EBE3D9;

  /* ── Brand ───────────────────────────── */
  --brand-terracotta:      #CA7A55;  /* primary UI accent */
  --brand-terracotta-soft: #E8A896;
  --brand-forest:          #1D3B2F;
  --brand-forest-light:    #3D5F4D;
  --brand-gold:            #D4A23A;  /* premium */
  --brand-logo:            #D94A35;  /* LOGO ONLY — do not use in UI */
  --peach-soft:            #F5D4BB;

  /* ── Semantic ────────────────────────── */
  --success: #2D7A3E;
  --danger:  #DC3E3E;
  --warning: #D4A23A;
  --info:    #3D5F4D;

  /* ── Typography ──────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type scale (size / weight / line-height / tracking) */
  --t-display-size:   32px;
  --t-display-weight: 800;
  --t-display-lh:     1.1;
  --t-display-track:  -0.02em;

  --t-h1-size:   24px;
  --t-h1-weight: 700;
  --t-h1-lh:     1.2;
  --t-h1-track:  -0.01em;

  --t-h2-size:   18px;
  --t-h2-weight: 600;
  --t-h2-lh:     1.3;
  --t-h2-track:  -0.005em;

  --t-h3-size:   16px;
  --t-h3-weight: 600;
  --t-h3-lh:     1.4;

  --t-body-size:   15px;
  --t-body-weight: 400;
  --t-body-lh:     1.5;

  --t-body-sm-size: 13px;

  --t-label-size:   12px;
  --t-label-weight: 500;
  --t-label-track:  0.02em;

  --t-caption-size:   11px;
  --t-caption-weight: 400;

  --t-button-size:   14px;
  --t-button-weight: 600;

  /* ── Spacing (4pt base, 8pt grid) ────── */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ── Radius (gap at 16-19 is intentional) */
  --r-sm:   10px;   /* chips, small buttons */
  --r-md:   12px;   /* inputs */
  --r-lg:   14px;   /* cards (default) */
  --r-xl:   20px;   /* hero cards */
  --r-2xl:  24px;   /* bottom sheets, modals */
  --r-full: 9999px; /* pills, avatars */

  /* ── Elevation (warm-tinted shadows) ─── */
  --shadow-sm: 0 1px 3px rgba(50, 46, 44, 0.08);
  --shadow-md: 0 8px 24px rgba(50, 46, 44, 0.12);

  /* ── Motion ──────────────────────────── */
  --dur-fast:    150ms;
  --dur-default: 250ms;
  --dur-slow:    400ms;
  --ease-default: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── Dark mode: warm-shifted, NOT inverted ── */
:root[data-theme="dark"], .theme-dark {
  --bg-parchment: #1A1714;
  --bg-card:      #211E1B;
  --bg-warm:      #2B2623;
  --bg-muted:     #2B2623;
  --fg-cocoa:     #EDE5D9;
  --fg-secondary: #D8CFC3;
  --fg-muted:     #8E8680;
  --border-default: #3B3532;
  --border-subtle:  #322D2A;
  --brand-terracotta: #D08460;
  --peach-soft:  #5A3D2E;
}

/* ══════════════════════════════════════════
   Semantic element defaults — use directly
   ══════════════════════════════════════════ */

html, body {
  background: var(--bg-parchment);
  color: var(--fg-cocoa);
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  font-weight: var(--t-body-weight);
  line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .t-h1 {
  font-size: var(--t-h1-size);
  font-weight: var(--t-h1-weight);
  line-height: var(--t-h1-lh);
  letter-spacing: var(--t-h1-track);
  color: var(--fg-cocoa);
  margin: 0;
}

h2, .t-h2 {
  font-size: var(--t-h2-size);
  font-weight: var(--t-h2-weight);
  line-height: var(--t-h2-lh);
  letter-spacing: var(--t-h2-track);
  color: var(--fg-cocoa);
  margin: 0;
}

h3, .t-h3 {
  font-size: var(--t-h3-size);
  font-weight: var(--t-h3-weight);
  line-height: var(--t-h3-lh);
  color: var(--fg-cocoa);
  margin: 0;
}

.t-display {
  font-size: var(--t-display-size);
  font-weight: var(--t-display-weight);
  line-height: var(--t-display-lh);
  letter-spacing: var(--t-display-track);
}

p, .t-body { font-size: var(--t-body-size); line-height: var(--t-body-lh); }

.t-body-sm { font-size: var(--t-body-sm-size); line-height: var(--t-body-lh); color: var(--fg-secondary); }

.t-label {
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  letter-spacing: var(--t-label-track);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-caption { font-size: var(--t-caption-size); color: var(--fg-muted); }

.t-button {
  font-size: var(--t-button-size);
  font-weight: var(--t-button-weight);
  line-height: 1;
}

.t-tabular { font-variant-numeric: tabular-nums; }

/* ── Utility primitives (mirror RN components) ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 48px;
  padding: 0 var(--s-6);
  border: 0;
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  font-size: var(--t-button-size);
  font-weight: var(--t-button-weight);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-default),
              opacity var(--dur-fast) var(--ease-default),
              background var(--dur-fast) var(--ease-default);
}
.btn:active { transform: scale(0.97); opacity: 0.9; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

.btn-sm { height: 40px; padding: 0 var(--s-5); }
.btn-lg { height: 56px; padding: 0 var(--s-8); }

.btn-primary     { background: var(--brand-terracotta); color: #fff; }
.btn-secondary   { background: var(--bg-muted);         color: var(--fg-cocoa); }
.btn-secondary:active { background: var(--bg-warm); }
.btn-ghost       { background: transparent;              color: var(--brand-terracotta); }
.btn-destructive { background: var(--danger);           color: #fff; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

.input {
  width: 100%;
  height: 48px;
  padding: 0 var(--s-4);
  background: color-mix(in srgb, var(--bg-muted) 60%, transparent);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--fg-cocoa);
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  outline: none;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.input::placeholder { color: var(--fg-muted); }
.input:focus { background: var(--bg-card); border-color: var(--border-default); }

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 var(--s-4);
  border-radius: var(--r-full);
  background: var(--bg-muted); color: var(--fg-muted);
  font-size: 13px; font-weight: var(--t-button-weight);
  border: 0; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.pill.is-active { background: var(--brand-terracotta); color: #fff; }

.tag {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 var(--s-3);
  border-radius: var(--r-full);
  font-size: var(--t-caption-size); font-weight: 500;
  line-height: 1;
}
.tag-society    { background: var(--brand-forest);     color: #fff; }
.tag-ambassador { background: var(--brand-terracotta); color: #fff; }
.tag-circle     { background: var(--peach-soft);       color: var(--fg-cocoa); }
.tag-partner    { background: var(--brand-gold);       color: var(--fg-cocoa); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}