/* ============================================
   RUNNIT — DESIGN TOKENS
   WHAT: single source of truth for color, type,
   spacing, radius, and shadow values.
   WHY: every component reads from these instead
   of hard-coded values, so a future rebrand or
   theme (e.g. per-school accent color) is a
   token edit, not a file-by-file hunt.
   ============================================ */

:root {
  /* ---- Color: base ---- */
  --color-bg: #F7F6F1;          /* page background — warm, not stark white */
  --color-bg-alt: #EFEDE4;      /* alternating section background */
  --color-surface: #FFFFFF;     /* cards, header, inputs */
  --color-ink: #1B2420;         /* primary text — deep green-black */
  --color-ink-soft: #4E5A54;    /* secondary text */
  --color-ink-faint: #66716B;   /* placeholders, metadata — darkened from #7C877F for WCAG AA contrast */

  /* ---- Color: brand ---- */
  --color-brand: #1F6F4A;       /* Runnit green — trust, campus, growth */
  --color-brand-dark: #133D29;
  --color-brand-tint: #E5F1EA;  /* light green backgrounds/badges */

  /* ---- Color: accent (CTAs, highlights) ---- */
  --color-accent: #E2601F;      /* warm terracotta-orange — energy, street food */
  --color-accent-dark: #B84B16;
  --color-accent-tint: #FBE8DB;

  /* ---- Color: utility ---- */
  --color-line: #E1DED2;        /* hairline borders */
  --color-line-strong: #C9C5B5;
  --color-success: #1F6F4A;
  --color-danger: #B3261E;
  --color-danger-tint: #FBEAEA;
  --color-seen: #8EE6B4;        /* the "Seen" tick on your own chat messages */

  /* ---- Type ---- */
  --font-display: 'Sora', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Radius — varies by hierarchy, not uniform ---- */
  --radius-sm: 6px;    /* buttons, inputs, chips, tags */
  --radius-md: 8px;    /* cards */
  --radius-lg: 12px;   /* large panels */
  --radius-pill: 999px; /* avatars and small count badges only */

  /* Height shared by buttons, search boxes, chips and selects, so they line
     up in a row. Raised to 44px on touch screens (see components.css). */
  --control-h: 40px;

  /* ---- Shadow — used sparingly, mostly on hover/elevation ---- */
  --shadow-sm: 0 1px 2px rgba(19, 26, 22, 0.06);
  --shadow-md: 0 10px 28px rgba(19, 26, 22, 0.10);

  /* ---- Layout ---- */
  --container-max: 1180px;
  --header-height: 72px;

  /* ---- Added for dark mode. Light values are EXACTLY the colours the site
     already used, so the light (default) look is unchanged. ---- */
  --color-on-brand: #FFFFFF;          /* text/icons on a green fill */
  --color-on-accent: #FFFFFF;         /* text on an orange fill */
  --color-on-danger: #FFFFFF;         /* text on a red fill */
  --color-danger-strong: #8F1D17;     /* red button hover */
  --color-alert-bg: #FDECEA;          /* "something went wrong" boxes */
  --color-inverse-bg: #1B2420;        /* tooltips, toasts */
  --color-inverse-ink: #FFFFFF;
  --color-footer-bg: #133D29;
  --color-footer-text: #E7EFEA;
  --color-footer-strong: #FFFFFF;     /* footer logo, headings, hovered links */
  --color-footer-soft: #B7C7BE;
  --color-footer-faint: #94A79C;
  --color-footer-line: rgba(255, 255, 255, 0.12);
  --color-bubble-mine: #1F6F4A;       /* your own chat bubbles */
  --color-on-bubble-mine: #FFFFFF;
  --color-scrim: rgba(19, 26, 22, 0.55);       /* behind dialogs */
  --color-scrim-soft: rgba(19, 26, 22, 0.5);
  --color-scrim-brand: rgba(19, 61, 41, 0.45);
  --shadow-panel: 0 -8px 32px rgba(19, 61, 41, 0.22);
  --shadow-row: 0 2px 10px rgba(19, 61, 41, 0.08);

  /* ---- Messages chat (css/pages/messages.css) ---- */
  --chat-wall: #E8EEE8;               /* the chat background behind bubbles */
  --chat-pattern: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%231F6F4A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' opacity='0.09'%3E%3Cg transform='translate(20 24) rotate(-12)'%3E%3Cpath d='M0 2h5l4 16h16l4-11H7'/%3E%3Ccircle cx='11' cy='23' r='2'/%3E%3Ccircle cx='23' cy='23' r='2'/%3E%3C/g%3E%3Cg transform='translate(128 22) rotate(10)'%3E%3Cpath d='M2 8h22l-2 20H4z'/%3E%3Cpath d='M8 8a5 5 0 0 1 10 0'/%3E%3C/g%3E%3Cg transform='translate(76 96)'%3E%3Cpath d='M10 26s9-8 9-15a9 9 0 0 0-18 0c0 7 9 15 9 15z'/%3E%3Ccircle cx='10' cy='11' r='3'/%3E%3C/g%3E%3Cg transform='translate(172 112) rotate(-8)'%3E%3Cpath d='M2 2h26v17H12l-7 6v-6H2z'/%3E%3C/g%3E%3Cg transform='translate(24 160) rotate(14)'%3E%3Cpath d='M12 1l3.4 7 7.6 1-5.5 5.3 1.3 7.6L12 18.3 5.2 21.9l1.3-7.6L1 9l7.6-1z'/%3E%3C/g%3E%3Cg transform='translate(122 178) rotate(-6)'%3E%3Cpath d='M2 3h10a4 4 0 0 1 4 4v18a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M30 3H20a4 4 0 0 0-4 4v18a3 3 0 0 1 3-3h11z'/%3E%3C/g%3E%3Ccircle cx='206' cy='44' r='2'/%3E%3Ccircle cx='64' cy='214' r='2'/%3E%3Ccircle cx='214' cy='206' r='2'/%3E%3Ccircle cx='104' cy='60' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  --chat-bar: #F6F8F5;                /* chat header and message box bar */
  --chat-theirs: #FFFFFF;             /* the other person's bubbles */
  --chat-shadow: 0 1px 1px rgba(19, 36, 28, 0.14);
}

/* ============================================
   DARK MODE
   Only when the visitor picks Dark (the moon button in the header, the
   "Dark mode" row in the phone menu, or Account → Appearance), which sets
   <html data-theme="dark">. Light stays the default for everyone, even on a
   phone that is itself in dark mode. js/theme-init.js applies the choice
   before the page paints; js/modules/theme.js runs the switch.
   Same token names, night values: a green-tinted night (not plain black),
   lighter green and orange so they stay readable.
   ============================================ */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0C1712;
  --color-bg-alt: #101E17;
  --color-surface: #13211A;
  --color-ink: #E8F1EB;
  --color-ink-soft: #B1C3B8;
  --color-ink-faint: #8DA397;
  --color-brand: #46C487;
  --color-brand-dark: #8FE0B6;
  --color-brand-tint: rgba(70, 196, 135, 0.14);
  --color-accent: #FF8A45;
  --color-accent-dark: #FFB27F;
  --color-accent-tint: rgba(255, 138, 69, 0.15);
  --color-line: #23362C;
  --color-line-strong: #34493E;
  --color-success: #46C487;
  --color-danger: #FF7B6E;
  --color-danger-tint: rgba(255, 123, 110, 0.14);
  --color-seen: #A6F5CB;
  --color-on-brand: #05170E;
  --color-on-accent: #1E0B01;
  --color-on-danger: #2A0602;
  --color-danger-strong: #FF9E94;
  --color-alert-bg: rgba(255, 123, 110, 0.14);
  --color-inverse-bg: #E8F1EB;
  --color-inverse-ink: #0C1712;
  --color-footer-bg: #08110D;
  --color-footer-text: #DCE7E0;
  --color-footer-strong: #F1F8F3;
  --color-footer-soft: #A3B8AB;
  --color-footer-faint: #7D9387;
  --color-footer-line: rgba(255, 255, 255, 0.08);
  --color-bubble-mine: #1E6A45;
  --color-on-bubble-mine: #F1FAF4;
  --color-scrim: rgba(0, 0, 0, 0.6);
  --color-scrim-soft: rgba(0, 0, 0, 0.55);
  --color-scrim-brand: rgba(0, 0, 0, 0.55);
  --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.02);
  --shadow-md: 0 12px 30px -10px rgba(0, 0, 0, 0.7);
  --shadow-panel: 0 -8px 32px rgba(0, 0, 0, 0.6);
  --shadow-row: 0 2px 10px rgba(0, 0, 0, 0.4);
  --chat-wall: #0A130F;
  --chat-pattern: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%238FE0B6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' opacity='0.06'%3E%3Cg transform='translate(20 24) rotate(-12)'%3E%3Cpath d='M0 2h5l4 16h16l4-11H7'/%3E%3Ccircle cx='11' cy='23' r='2'/%3E%3Ccircle cx='23' cy='23' r='2'/%3E%3C/g%3E%3Cg transform='translate(128 22) rotate(10)'%3E%3Cpath d='M2 8h22l-2 20H4z'/%3E%3Cpath d='M8 8a5 5 0 0 1 10 0'/%3E%3C/g%3E%3Cg transform='translate(76 96)'%3E%3Cpath d='M10 26s9-8 9-15a9 9 0 0 0-18 0c0 7 9 15 9 15z'/%3E%3Ccircle cx='10' cy='11' r='3'/%3E%3C/g%3E%3Cg transform='translate(172 112) rotate(-8)'%3E%3Cpath d='M2 2h26v17H12l-7 6v-6H2z'/%3E%3C/g%3E%3Cg transform='translate(24 160) rotate(14)'%3E%3Cpath d='M12 1l3.4 7 7.6 1-5.5 5.3 1.3 7.6L12 18.3 5.2 21.9l1.3-7.6L1 9l7.6-1z'/%3E%3C/g%3E%3Cg transform='translate(122 178) rotate(-6)'%3E%3Cpath d='M2 3h10a4 4 0 0 1 4 4v18a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M30 3H20a4 4 0 0 0-4 4v18a3 3 0 0 1 3-3h11z'/%3E%3C/g%3E%3Ccircle cx='206' cy='44' r='2'/%3E%3Ccircle cx='64' cy='214' r='2'/%3E%3Ccircle cx='214' cy='206' r='2'/%3E%3Ccircle cx='104' cy='60' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  --chat-bar: #111D17;
  --chat-theirs: #1A2A22;
  --chat-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}