/* Worship — design tokens (final).
   Theme:  <html data-theme="dark|light">   (dark is the default)
   Accent: <html data-accent="ember|ice">   (ember is the default; ice = the Blue choice in Settings)
   Every colour in components.css comes from here. No gradients, no glow, no blur. */

/* ---------- Fonts (self-hosted, OFL) ----------
   The latin-ext faces also cover U+0300-036F (combining marks). A ṭ typed as t + U+0323 then still
   draws in the same font instead of falling back to another one. Song text is NFC-normalised on save anyway. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0300-036F,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Urbanist draws ṭ Ṭ (U+1E6D/1E6C) in its own design (checked in Chromium, see NOTES.md),
   so it is used for every large title, song titles included, and for big numbers. */
@font-face{font-family:"Urbanist";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/urbanist-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0300-036F,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Urbanist";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/urbanist-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* ---------- Type ---------- */
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-display: "Urbanist", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* UI text (SF / Inter). Nothing is ever smaller than 11 px. */
  --fs-micro: 11px;   /* rail labels, tab-bar labels, credit, count circles */
  --fs-xs: 12px;      /* captions, table header band, kbd */
  --fs-sm: 13px;      /* overlines, meta, secondary rows, key */
  --fs-md: 14px;      /* body, buttons, inputs (desktop) */
  --fs-lg: 15px;      /* row titles */
  --fs-phone: 16px;   /* body on phones (no iOS zoom) */
  /* Display (Urbanist): four steps only */
  --fs-card: 24px;    /* Urbanist 400 — card titles, dialog and sheet titles, wordmark */
  --fs-detail: 32px;  /* Urbanist 300 — detail titles, song titles, stat numbers, phone titles */
  --fs-page: 44px;    /* Urbanist 300 — page titles in the top bar */
  --fs-hero: 60px;    /* Urbanist 300 — setlist title, date-tile day */

  --track-tight: -0.02em;  /* Urbanist >= 24px */
  --track-ui: -0.006em;    /* UI text >= 15px */

  /* ---------- Shape (the only radii) ---------- */
  --r-xs: 8px;     /* kbd, tooltip */
  --r-sm: 12px;    /* thumbnails, slide cards, table header band, menu items, small tiles, QR */
  --r-md: 16px;    /* inputs, search, list rows, menus */
  --r-lg: 20px;    /* inner cards, rail active square, date tile */
  --r-xl: 26px;    /* panels / cards, remote buttons, sheets */
  --r-full: 999px; /* pills, round buttons, dots, progress bars */

  /* ---------- Space (4 px grid) ---------- */
  --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;
  --gap: 12px;     /* between cards */

  /* ---------- Sizes ---------- */
  --h-sm: 32px; --h-md: 40px; --h-lg: 48px; --h-xl: 64px;
  --rail-w: 88px; --topbar-h: 104px; --livebar-h: 72px; --tabbar-h: 64px; --minibar-h: 64px;

  /* ---------- Phone safe areas (iPhone notch / Dynamic Island and home indicator) ---------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: 120ms; --t: 180ms;
}

/* ================= DARK (default) ================= */
:root, [data-theme="dark"]{
  color-scheme: dark;
  --canvas:    #0d0d0e;   /* page behind the cards */
  --surface-1: #18181a;   /* cards / panels */
  --surface-2: #222225;   /* inner items, inputs, grey pills */
  --surface-3: #2c2c30;   /* hover on inner items, progress track, Next in the Live now bar */
  --surface-4: #36363b;   /* hover on surface-3 */
  --surface-pop:#232326;  /* menus, toasts, dialogs */
  --raised:    #1c1c1f;   /* things that sit straight on the canvas: rail active square, top-bar search, round buttons */
  --seg-track: #222225;   /* segmented control track */
  --seg-thumb: #38383d;   /* segmented control selected pill (a lighter grey, as in the Team Management reference) */
  --knob-off:  #8a8a92;   /* toggle knob when off */
  --line:      rgba(255,255,255,.06);  /* the only border: 1 px hairline, rarely */
  --line-2:    rgba(255,255,255,.10);
  --hover:     rgba(255,255,255,.05);

  --text-1: #f4f4f5;
  --text-2: #a3a3a8;
  --text-3: #8d8d95;      /* 4.8:1 on surface-2, 5.4:1 on cards */

  /* SELECTED (rule 1). Dark: the white pill for narrow things (tabs, settings menu, narrow lists, chips).
     Wide rows and section cards use --selected-row, so an 880 px white bar never outshines the accent. */
  --selected-bg: #f4f4f5;
  --selected-fg: #111113;
  --selected-fg-2: #55555c;
  --selected-row: #303034;
  --on-bg: #f4f4f5;        /* selected chip (a thing that already has a grey fill) */
  --on-fg: #111113;
  --on-shadow: none;
  --inverse:    #f4f4f5;   /* toggle on, Clear / Black when active, tooltip */
  --inverse-fg: #111113;

  --danger: #e5484d;       /* crimson: destructive confirmations, Offline dot, credit heart */
  --danger-fg: #ffffff;
  --dot-connected: #d4d4d8;
  --dot-muted: #5c5c63;

  --slide-dim: rgba(0,0,0,.38);
  --shadow-pop: 0 12px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
  --shadow-dialog: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
  --shadow-thumb: none;   /* segmented thumb lift */
  --focus: rgba(255,255,255,.8);
  --scrim: rgba(0,0,0,.6);
  --selection: rgba(255,255,255,.24);  /* selected text: neutral, never the system blue */

  /* diagonal hatch for empty / inactive areas (an SVG pattern, not a gradient) */
  --hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M-2 12L12 -2M-2 2L2 -2M8 12L12 8' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* ================= LIGHT ================= */
[data-theme="light"]{
  color-scheme: light;
  --canvas:    #edf1f6;
  --surface-1: #ffffff;
  --surface-2: #f3f5f9;
  --surface-3: #e7ebf1;
  --surface-4: #dde2ea;
  --surface-pop:#ffffff;
  --raised:    #ffffff;
  --seg-track: #edf0f5;
  --seg-thumb: #ffffff;
  --knob-off:  #7a7a82;   /* grey knob as in dark: 3.5:1 on the off track (a white knob was 1.2:1) */
  --line:      rgba(15,20,30,.07);
  --line-2:    rgba(15,20,30,.12);
  --hover:     rgba(15,20,30,.04);

  --text-1: #101217;
  --text-2: #4b5059;
  --text-3: #5f646e;      /* 5.2:1 on the canvas */

  /* SELECTED (rule 1). Light: a neutral grey tint on white; white + a soft shadow on a grey fill.
     No blue here: blue is kept for the live item only. */
  --selected-bg: #e9ebef;
  --selected-fg: #101217;
  --selected-fg-2: #4b5059;
  --selected-row: #e9ebef;
  --on-bg: #ffffff;
  --on-fg: #101217;
  --on-shadow: 0 1px 2px rgba(16,24,40,.10), 0 0 0 .5px rgba(16,24,40,.08);
  --inverse:    #101217;
  --inverse-fg: #ffffff;

  --danger: #d1293d;
  --danger-fg: #ffffff;
  --dot-connected: #8a8f98;
  --dot-muted: #b4b9c2;

  --slide-dim: rgba(0,0,0,.38);
  --shadow-pop: 0 12px 32px rgba(16,24,40,.12), 0 0 0 1px rgba(15,20,30,.06);
  --shadow-dialog: 0 24px 64px rgba(16,24,40,.18), 0 0 0 1px rgba(15,20,30,.06);
  --shadow-thumb: 0 1px 2px rgba(16,24,40,.10), 0 0 0 .5px rgba(16,24,40,.08);
  --focus: rgba(16,18,23,.75);
  --scrim: rgba(16,18,23,.32);
  --selection: rgba(16,18,23,.16);

  --hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M-2 12L12 -2M-2 2L2 -2M8 12L12 8' stroke='%23101217' stroke-opacity='.07' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* ================= ACCENT A — Ice blue (Settings › Appearance › Blue) =================
   Used ONLY for: the one main action per screen, the live/current item (tinted surface + dot), progress fills. */
[data-accent="ice"]{
  --accent:       #9fc5f6;  /* soft ice blue on dark, azure side (hue 214) so it never reads lavender */
  --accent-hover: #b3d1f8;
  --accent-fg:    #0b1426;  /* dark text on the light pill — 10.3:1 */
  --accent-tint:  #18232f;  /* live card / live row surface */
  --accent-tint-2:#1f2c3a;  /* hover on a live row */
  --accent-dot:   #9fc5f6;
}
[data-theme="light"][data-accent="ice"]{
  --accent:       #1d6ad6;  /* deeper, AA-safe blue — white text 5.1:1 */
  --accent-hover: #185cbd;
  --accent-fg:    #ffffff;
  --accent-tint:  #dae6fc;  /* the only blue surface: live */
  --accent-tint-2:#cfdefb;
  --accent-dot:   #1d6ad6;
}

/* ================= ACCENT B — Ember (the standard: also used when data-accent is missing) ================= */
:root:not([data-accent="ice"]), [data-accent="ember"]{
  --accent:       #d4441f;  /* warm red-orange — white text 4.5:1 */
  --accent-hover: #df5230;
  --accent-fg:    #ffffff;
  --accent-tint:  #33201b;  /* deep ember-tinted card surface */
  --accent-tint-2:#3d2620;
  --accent-dot:   #f47a3d;  /* more orange than the crimson Offline dot (hue 20 vs 358) */
}
[data-theme="light"]:not([data-accent="ice"]), [data-theme="light"][data-accent="ember"]{
  --canvas:    #f2f1ef;     /* warm off-white, so the canvas never brings in a second hue */
  --surface-2: #f5f4f2;
  --surface-3: #ebe9e6;
  --surface-4: #e1dfdb;
  --selected-bg: #eae8e5;
  --selected-row: #eae8e5;
  --seg-track: #efeeeb;
  --accent:       #c2410c;  /* white text 5.2:1 */
  --accent-hover: #a9380a;
  --accent-fg:    #ffffff;
  --accent-tint:  #fbe9e1;
  --accent-tint-2:#f8ddd2;
  --accent-dot:   #db5a1e;  /* orange, apart from the crimson Offline dot */
}