/* ==========================================================
   TruBible design tokens — "Daylight" (TINL-1312, second pass, Nov 2026)
   ----------------------------------------------------------
   The owner's brief after the first, colourful pass: far fewer colours, no gradients, simple and
   friendly for people who use it every day, in the spirit of ChatGPT, Antigravity and Notion.

   So: white paper, near-black ink, neutral greys. NO brand hue in the interface: the only colour
   is the logo, photographs, slides, and status (green = fine, red = live or wrong, amber =
   careful). "Modern" comes from type, space, hairlines and motion, never from colour.

   Two themes, same token names:
     Light (default)                        :root
     Dark                                   [data-theme="dark"] on <html> or any container
   The switch is /js/theme.js (cookie `tb_theme` = dawn | night on .trubible.com). Pages that fix
   their own theme (meet room, listener night mode) set data-theme themselves.

   Loaded first on every page, before style.css, style-pages.css and the page's own CSS.
   Worship Studio and Connect load this file too.

   Token names are kept from the first pass so every rule follows; several are now aliases:
     --primary / --accent / --dawn …   all ink (no hue)
     --grad-* …                        flat fills (kept as gradients so `background:` stays valid)
     --sky / --sky-band / --sky-sun / --horizon-rim … plain surfaces (no sky is drawn any more)

   Fills: a solid ink surface and the text that goes on it.
     --solid / --on-solid        the main button: ink with white text (white with ink text in Dark)
     --grad-brand              a fill that ALWAYS takes white text (avatars, icon tiles): ink in
                               Light, dark grey in Dark. Never put var(--text) on it.
   Contrast (WCAG 2.2 AA): every --text* value is at least 4.5:1 on every --bg* surface of its theme.
   ========================================================== */

:root {
  /* Ink and its tints (there is no brand hue) */
  /* The ONE accent: "morning sky", from the blue in the logo. Used narrowly, so it means something:
     the main button of a screen, where you are in the navigation, links in running text, the focus
     ring. Never for big surfaces (those stay paper or ink). A church's own colour replaces it on
     branded pages (app.js applyBranding). Contrast: white on --brand 5.9:1, --brand on paper 5.9:1,
     --brand on --brand-soft 5.3:1. */
  --brand: #0369a1;
  --brand-hover: #075985;
  --brand-soft: #e8f4fb;
  --brand-line: #b6dcf0;
  --on-brand: #ffffff;
  --brand-rgb: 3, 105, 161;
  --solid: #0d0d0d;
  --on-solid: #ffffff;
  --primary: #0d0d0d;
  --primary-dark: #000000;
  --primary-light: #2b2b2b;
  --primary-bg: #f3f3f2;
  --primary-border: #d4d4d0;
  --primary-rgb: 13, 13, 13;
  --accent: #0d0d0d;
  --accent-light: #2b2b2b;
  --accent-bg: #f3f3f2;
  --accent-border: #d4d4d0;
  --accent-rgb: 13, 13, 13;
  --indigo: #0d0d0d;

  /* Aliases kept from the first pass (all neutral now) */
  --dawn: #0d0d0d;
  --dawn-soft: #d4d4d0;
  --dawn-ink: #0d0d0d;
  --dawn-on: var(--on-solid);
  --dawn-bg: #f7f7f6;
  --dawn-border: #d4d4d0;
  --dawn-rgb: 13, 13, 13;
  --rose: #5c5c5c;
  --rose-rgb: 92, 92, 92;

  --grad-brand: linear-gradient(#0d0d0d, #0d0d0d);
  --grad-brand-soft: linear-gradient(#f7f7f6, #f7f7f6);
  --grad-primary: linear-gradient(var(--solid), var(--solid));
  --grad-dawn: linear-gradient(#0d0d0d, #0d0d0d);
  --grad-dawn-text: linear-gradient(#0d0d0d, #0d0d0d);
  --grad-gold: linear-gradient(var(--solid), var(--solid));

  /* Surfaces */
  --bg: #ffffff;
  --bg-page: #ffffff;
  --bg-card: #ffffff;
  --bg-subtle: #f7f7f6;
  --bg-hover: #f0f0ee;
  --bg-active: #e6e6e3;
  --bg-dark: #0d0d0d;
  --bg-elevated: #ffffff;
  --overlay: rgba(0, 0, 0, 0.45);
  --glass: rgba(255, 255, 255, 0.82);
  --glass-strong: rgba(255, 255, 255, 0.95);
  --ambient: none;
  --sky: #ffffff;
  --sky-band: #ffffff;
  --sky-sun: none;
  --horizon-rim: none;

  /* Text */
  --text: #0d0d0d;
  --text-secondary: #2b2b2b;
  --text-muted: #5c5c5c;
  --text-light: #6b6b6b;
  --text-faint: #6b6b6b;
  --text-on-primary: var(--on-solid);

  /* Lines */
  --border: #e8e8e5;
  --border-strong: #d4d4d0;
  --border-light: #f0f0ee;

  /* Status: the only colour in the interface */
  --success: #047857;
  --success-bg: #ecfdf5;
  --success-border: #a7f3d0;
  --danger: #c81e1e;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --warning: #c2410c;
  --warning-ink: #a84a08;
  --warning-bg: #fff4ed;
  --warning-border: #fdd0b4;
  --info: #2b2b2b;
  --info-bg: #f3f3f2;
  --info-border: #d4d4d0;
  --live: #ef4444;

  /* Elevation: hairlines do most of the work; shadows are soft and neutral */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px -6px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 16px 48px -12px rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 28px 80px -20px rgba(0, 0, 0, 0.24);
  --shadow-glow: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-primary: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-dawn: 0 1px 2px rgba(0, 0, 0, 0.08);
  --ring: 0 0 0 3px rgba(var(--brand-rgb), 0.35);
  --ring-danger: 0 0 0 3px rgba(200, 30, 30, 0.25);

  /* Shape */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* Space (4px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* Type: one sans for everything. --font-accent (an italic serif) is used for ONE emphasised phrase
     per marketing hero and for Scripture; set it to var(--font-body) to drop the serif everywhere. */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: var(--font-body);
  --font-brand: var(--font-body);
  --font-ui: var(--font-body);
  --font-accent: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: clamp(1.375rem, 1.1rem + 1vw, 1.625rem);
  --fs-3xl: clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem);
  --fs-4xl: clamp(2rem, 1.3rem + 2.8vw, 3rem);
  --fs-5xl: clamp(2.5rem, 1.4rem + 4.6vw, 4.5rem);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 460ms;
  --dur-reveal: 800ms;

  /* Layout */
  --nav-h: 64px;
  --tabbar-h: 64px;             /* phone bottom tab bar (pages opt in with body.has-tabbar) */
  --content-max: 1200px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Layers */
  --z-sticky: 90;
  --z-nav: 100;
  --z-dropdown: 1000;
  --z-drawer: 1100;
  --z-modal: 1200;
  --z-toast: 1300;

  color-scheme: light;
}

/* Korean and Chinese have no glyphs in the accent serif: the emphasised phrase stays in the sans. */
:lang(ko), :lang(zh) { --font-accent: var(--font-body); }

/* Dark. Any page (the meet room, the listener's night mode) or container can set
   data-theme="dark" and every token follows. */
[data-theme="dark"] {
  /* The accent in Dark: a light sky blue that takes dark text (on it 8.2:1; on the page 10.3:1). */
  --brand: #7cc7ee;
  --brand-hover: #9bd5f3;
  --brand-soft: rgba(124, 199, 238, 0.16);
  --brand-line: rgba(124, 199, 238, 0.36);
  --on-brand: #06283b;
  --brand-rgb: 124, 199, 238;
  --solid: #f3f3f3;
  --on-solid: #0d0d0d;
  --primary: #f3f3f3;
  --primary-dark: #ffffff;
  --primary-light: #dedede;
  --primary-bg: rgba(255, 255, 255, 0.08);
  --primary-border: rgba(255, 255, 255, 0.22);
  --primary-rgb: 243, 243, 243;
  --accent: #f3f3f3;
  --accent-light: #dedede;
  --accent-bg: rgba(255, 255, 255, 0.08);
  --accent-border: rgba(255, 255, 255, 0.22);
  --accent-rgb: 243, 243, 243;
  --indigo: #f3f3f3;
  --dawn: #f3f3f3;
  --dawn-soft: #3d3d41;
  --dawn-ink: #f3f3f3;
  --dawn-bg: rgba(255, 255, 255, 0.06);
  --dawn-border: #3d3d41;
  --dawn-rgb: 243, 243, 243;
  --rose: #adadad;
  --rose-rgb: 173, 173, 173;
  --grad-brand: linear-gradient(#3a3a3e, #3a3a3e);
  --grad-brand-soft: linear-gradient(#141416, #141416);
  --grad-dawn: linear-gradient(#f3f3f3, #f3f3f3);
  --grad-dawn-text: linear-gradient(#f3f3f3, #f3f3f3);
  --bg: #121213;
  --bg-page: #0e0e0f;
  --bg-card: #18181a;
  --bg-subtle: #141416;
  --bg-hover: #222225;
  --bg-active: #2d2d31;
  --bg-elevated: #1e1e21;
  --overlay: rgba(0, 0, 0, 0.7);
  --glass: rgba(14, 14, 15, 0.8);
  --glass-strong: rgba(14, 14, 15, 0.95);
  --sky: #0e0e0f;
  --sky-band: #18181a;
  --text: #f3f3f3;
  --text-secondary: #dedede;
  --text-muted: #adadad;
  --text-light: #969696;
  --text-faint: #969696;
  --border: #2a2a2d;
  --border-strong: #3d3d41;
  --border-light: #1f1f22;
  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --success-border: rgba(52, 211, 153, 0.30);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.12);
  --danger-border: rgba(248, 113, 113, 0.30);
  --warning: #fb923c;
  --warning-ink: #fdba74;
  --warning-bg: rgba(251, 146, 60, 0.12);
  --warning-border: rgba(251, 146, 60, 0.30);
  --info: #dedede;
  --info-bg: rgba(255, 255, 255, 0.08);
  --info-border: rgba(255, 255, 255, 0.22);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 12px 28px -6px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 56px -12px rgba(0, 0, 0, 0.65);
  --shadow-xl: 0 36px 90px -18px rgba(0, 0, 0, 0.75);
  --ring: 0 0 0 3px rgba(var(--brand-rgb), 0.45);
  color-scheme: dark;
}