/* Tasbeha design tokens, generated from the design system (project/tokens.json):
   https://claude.ai/artifact/RiqyCR21AfAyVT4GGPtNrF
   Every token is the system's name with --ts- in front. The palette comes from the
   original tasbeha.org gold header, lightened, over a white page (14 values); lapis and
   cinnabar are kept from the icons for focus and errors only. Semantic tokens are aliases.
   Light theme only. Every page links this file (see README.md, "The header" for the masthead). */

/* The Coptic face: CSU Avva Shenouda, the look of the Church's service
   books, subset to Coptic and its combining marks (fonts/CSUAvvaShenouda.woff2, 26KB). */
@font-face {
  font-family: "CSU Avva Shenouda";
  src: local("CSU Avva Shenouda"), url("/hymn_library/design/fonts/CSUAvvaShenouda.woff2") format("woff2");
  unicode-range: U+0300-036F, U+03E2-03EF, U+2C80-2CFF, U+FE20-FE2F;
  font-display: swap;
}

:root {
  /* ---- Colour: the original tasbeha.org gold header, lightened, over a white page; lapis and cinnabar kept for focus and errors ---- */
  --ts-white: #ffffff; /* The page. Every page is white and crisp; text sits straight on it. */
  --ts-cream: #fffaea; /* Panels: the lesson toolbar, cards, the footer, table heads, hover. The warm pale gold of the lessons page's unit headers. ink 16.5:1, ink-soft 5.7:1, sienna 7.9:1, ochre 5.6:1, logo-brown 5.8:1 on it. */
  --ts-sand: #ece3cf; /* Hairlines: frames of panels and cards, rules between rows, empty tracks. Decorative only, never text. */
  --ts-ink: #1f1a17; /* Body text and headings. 17.2:1 on white, 16.0:1 on cream, 15.1:1 on gold-pale. */
  --ts-ink-soft: #6e6258; /* Muted text (meta, help, translations at rest) and the edges of controls. 5.9:1 on white, 5.5:1 on cream, 5.2:1 on gold-pale. */
  --ts-gold-light: #f9edc0; /* The site header: the original tasbeha.org gold, lightened. brown 10.9:1 on it. */
  --ts-brown: #562300; /* The header text, the brand, headings of groups, the niche frame. 10.9:1 on gold-light, 12.8:1 on white. */
  --ts-umber: #673417; /* The primary action: buttons and selected chips, checked boxes, progress, with white text (10.1:1). */
  --ts-sienna: #7a3f1b; /* Links. 8.2:1 on white, 7.6:1 on cream, 7.2:1 on gold-pale. */
  --ts-ochre: #8a5a2b; /* The reading in English letters above the Coptic, small labels, meaning-bearing icons, warnings. 5.9:1 on white, 5.4:1 on cream, 5.1:1 on gold-pale. */
  --ts-gold-pale: #fbf0c4; /* The line being sung and the current row; a selected ground. ink 15.1:1, ochre 5.1:1 on it. */
  --ts-bronze: #c89c65; /* Fine lines and circles: the current line's left edge, difficulty dots, the timeline, separators, the play button. Decorative only (2.5:1 on white); ink on bronze 6.9:1. */
  --ts-gold: #c28a00; /* The original site's warm gold, filled: numbered circles and the selected category, with white bold figures of 17px and up (3.0:1). */
  --ts-lapis: #3a669f; /* Kept from the icons for the keyboard focus ring and info only. 5.9:1 on white. */
  --ts-cinnabar: #b03e23; /* Kept from the icons for errors only. 5.9:1 on white, 5.5:1 on cream. */
  /* The lesson player keeps its original gold, at the user's request */
  --ts-player-ground: #fffdf6; /* The lesson player's ground. Kept from the original site at the user's request. player-ink 8.5:1, #333 time and line 12.4:1 on it. */
  --ts-player-line: #ead9a4; /* The player's top border and the shortcuts pop-up edge. Kept from the original site. */
  --ts-player-track: #efe3bd; /* The timeline's empty track. Decorative. Kept from the original site. */
  --ts-player-gold: #c28a00; /* The play button, the played part of the timeline, the head's ring, toggles that are on. Kept from the original site. White on it is 3.0:1: kept, because the play icon is a large glyph (20px, bold) and on-toggles carry a label and aria-pressed as well. */
  --ts-player-gold-hover: #a87700; /* Hover on the play button and on toggles that are on. White on it 4.0:1. */
  --ts-player-ink: #5c4a10; /* The player's buttons and key caps. 8.5:1 on player-ground, 7.3:1 on the hover ground #f6ecc9. Kept from the original site. */
  --ts-logo-brown: #905416; /* The wordmark's brown, and page titles. 6.1:1 on white, 5.6:1 on cream, 5.2:1 on gold-light. */
  --ts-text: var(--ts-ink); /* Body text and headings. */
  --ts-title: var(--ts-logo-brown); /* The page title in English (Marcellus) and in Arabic, and the titles of section cards: the logo's brown, so a page's name matches the site's. */
  --ts-text-muted: var(--ts-ink-soft); /* Meta, help, translations at rest. */
  --ts-surface: var(--ts-white); /* The page ground. */
  --ts-surface-raised: var(--ts-cream); /* Panels, toolbars, the footer, hover. */
  --ts-border: var(--ts-sand); /* Hairlines and frames. */
  --ts-border-control: var(--ts-ink-soft); /* Edges of controls (5.9:1 on white). */
  --ts-header: var(--ts-gold-light); /* The site header ground. */
  --ts-header-text: var(--ts-brown); /* Header menu text and the brand. */
  --ts-link: var(--ts-sienna); /* Links in text. */
  --ts-reading: var(--ts-ochre); /* The English-letters reading line. */
  --ts-focus: var(--ts-lapis); /* The focus ring, 2px, 2px outside the element. */
  --ts-accent: var(--ts-umber); /* The primary action. */
  --ts-on-accent: var(--ts-white); /* Text on the primary action (10.1:1). */
  --ts-selected: var(--ts-gold-pale); /* The ground of a selected tag, page or option. */
  --ts-highlight: var(--ts-gold-pale); /* The line being sung and the current row. */
  --ts-highlight-edge: var(--ts-bronze); /* The left edge of the line being sung. */
  --ts-danger: var(--ts-cinnabar); /* Errors and destructive actions only. */
  --ts-warning: var(--ts-ochre); /* Warning text and icon. */
  --ts-info: var(--ts-lapis); /* Info text and icon. */
  --ts-success: var(--ts-umber); /* Success: learned, saved, told by its tick icon and words. */

  /* ---- spacing ---- */
  --ts-space-0-5: 2px; /* Hairline gaps: between a reading and its Coptic, dots in DifficultyDots. */
  --ts-space-1: 4px; /* Icon to label; badge padding top and bottom. */
  --ts-space-2: 8px; /* Between related controls; small button padding; list item padding. */
  --ts-space-3: 12px; /* Input padding; between a label and its field; card gap on phones. */
  --ts-space-4: 16px; /* Card padding; the phone's side gutter; between paragraphs of UI. */
  --ts-space-5: 20px; /* Between form fields; card padding on desktop. */
  --ts-space-6: 24px; /* Between cards; a dialog's padding; the tablet gutter. */
  --ts-space-8: 32px; /* Between groups inside a section; the page header's padding. */
  --ts-space-10: 40px; /* Above a section header. */
  --ts-space-12: 48px; /* Between sections of a page. */
  --ts-space-16: 64px; /* Above the footer; the page header's top on desktop. */
  --ts-space-20: 80px; /* The cover's and the home page's generous bands. */
  --ts-line-pad-y: 7px; /* Above and below the text inside a lesson line (site value, kept). */
  --ts-line-pad-x: 10px; /* Left and right inside a lesson line; the gold bar sits outside it. */
  --ts-line-gap: 2px; /* Between two lines of the same paragraph. */
  --ts-para-pad-y: 6px; /* Above and below a lesson paragraph. */
  --ts-word-gap: 0.5em; /* After each word pair (reading over Coptic). */
  --ts-panel-pad: 15px; /* Inside the lesson panel. */
  --ts-player-pad-x: 16px; /* Left and right inside the docked player (8px under 600px). */
  --ts-gutter-phone: 16px; /* Page side gutter under 600px. */
  --ts-gutter-tablet: 24px; /* Page side gutter 600px to 991px. */
  --ts-gutter-desktop: 32px; /* Page side gutter from 992px. */
  --ts-measure: 68ch; /* Longest line of running English (articles, intros). */
  --ts-container: 1170px; /* The widest the page gets (Bootstrap 3's container, the site's own). */

  /* ---- radius ---- */
  --ts-radius-none: 0; /* Ornament frames and icon panels: painted boards have square corners. */
  --ts-radius-xs: 2px; /* Cards, panels, inputs, buttons: a carved panel's eased edge. */
  --ts-radius-sm: 3px; /* The marker behind the word being sung, the taught letter, badges. */
  --ts-radius-md: 6px; /* Tooltips, toasts, menus. */
  --ts-radius-pill: 999px; /* Toggles, tags that filter, the speed pill, the search field. */
  --ts-radius-round: 50%; /* Round player buttons, unit numbers, difficulty dots, roundels. */
  --ts-radius-arch: 999px 999px 0 0; /* The round (horseshoe-like) arched niche: a head with a full half-round top. */

  /* ---- border ---- */
  --ts-border-hair: 1px; /* Frames of cards, panels and inputs; rules. */
  --ts-border-rule: 2px; /* The rule under a page header; the selected tab's underline. */
  --ts-border-bar: 4px; /* The gold bar at the start of the current line (size-active-bar) and of a selected list item. */
  --ts-border-band: 14px; /* The icon frame's band of triangles, as a panel border (IconFrame). */
  --ts-border-band-thin: 8px; /* The triangle band as a section rule. */
  --ts-border-cord: 18px; /* The woven rope (BraidedCord): the rule under a title and the rope border; 14 to 24px. */
  --ts-border-vine: 22px; /* The grapevine scroll border (GrapevineBorder). */

  /* ---- size ---- */
  --ts-size-touch: 44px; /* The smallest thing a finger presses: player buttons, icon buttons, toggles' hit area. */
  --ts-size-control: 40px; /* Height of inputs, selects, the search field and medium buttons. */
  --ts-size-control-s: 32px; /* Small buttons and the A-/A+ pair. */
  --ts-size-control-l: 48px; /* Large buttons on the home page and empty states. */
  --ts-size-play: 52px; /* The play button. */
  --ts-size-unit-num: 40px; /* The disc with a unit's number. */
  --ts-size-mark: 56px; /* The knotwork cross or the five-diamond cross as a mark in a header. */
  --ts-size-mark-s: 28px; /* The knotwork cross as a divider's centre. */
  --ts-size-active-bar: 4px; /* The gilt bar on the left of the line being sung. */
  --ts-size-progress: 4px; /* The bar along the bottom of the active line. */
  --ts-size-dot: 6px; /* A difficulty dot; ten make the scale. */
  --ts-size-focus-ring: 2px; /* Focus outline width, solid, offset 2px (inside lines: -2px). */

  /* ---- textSize ---- */
  --ts-text-step-1: 85%; /* Smallest the A- button goes. */
  --ts-text-step-2: 100%; /* One step below normal. */
  --ts-text-step-3: 115%; /* Normal: the lesson panel's size on first visit. The line type styles are computed here. */
  --ts-text-step-4: 130%; /* A+ once. */
  --ts-text-step-5: 150%; /* A+ twice. */
  --ts-text-step-6: 175%; /* Largest the A+ button goes. */

  /* ---- breakpoint ---- */
  --ts-bp-phone: 0px; /* Phones: one column, 16px gutters, stacked lesson lines, the player on two rows. */
  --ts-bp-phablet: 600px; /* Large phones: the player on one row; cards two across. */
  --ts-bp-tablet: 768px; /* Tablets: lesson lines go two columns (Coptic 60%, translation 40%); 8-column grid. */
  --ts-bp-desktop: 992px; /* Desktop: 12-column grid, 32px gutters, side navigation beside content. */
  --ts-bp-wide: 1200px; /* Wide: the container stops at 1170px; keyboard hints show in the player from 1100px. */

  /* ---- duration ---- */
  --ts-duration-instant: 0ms; /* Everything under prefers-reduced-motion: reduce. */
  --ts-duration-fast: 120ms; /* Hover and press colour changes, focus rings. */
  --ts-duration-base: 200ms; /* The current line's ground, accordions opening, tabs. */
  --ts-duration-slow: 320ms; /* Dialogs and toasts entering. */

  /* ---- easing ---- */
  --ts-ease-standard: cubic-bezier(0.2, 0, 0.2, 1); /* Most transitions. */
  --ts-ease-enter: cubic-bezier(0, 0, 0.2, 1); /* Things arriving: dialogs, toasts. */
  --ts-ease-exit: cubic-bezier(0.4, 0, 1, 1); /* Things leaving. */

  /* ---- zIndex ---- */
  --ts-z-sticky: 10; /* The sticky toolbar. */
  --ts-z-player: 40; /* The docked player. */
  --ts-z-overlay: 60; /* The dialog scrim and dialog. */
  --ts-z-toast: 70; /* Toasts, above dialogs. */
  --ts-z-tooltip: 80; /* Tooltips, above everything. */

  /* ---- shadow ---- */
  --ts-shadow-none: none; /* Most things: borders carry structure, not shadows. */
  --ts-shadow-inset: inset 0 1px 2px rgba(35,27,24,0.08); /* Inputs and the search field: pressed into the page. */
  --ts-shadow-raised: 0 1px 2px rgba(35,27,24,0.08), 0 2px 6px rgba(35,27,24,0.06); /* A card under the pointer; a sticky toolbar. */
  --ts-shadow-overlay: 0 12px 32px rgba(35,27,24,0.22), 0 2px 6px rgba(35,27,24,0.12); /* Dialogs and menus. */
  --ts-shadow-toast: 0 6px 18px rgba(35,27,24,0.20); /* Toasts. */
  --ts-shadow-player: 0 -4px 16px rgba(35,27,24,0.08); /* The player docked at the bottom, cast upward. */
  --ts-shadow-word-now: 0 0 0 2px #c89c65, 0 2px 0 2px #8a5a2b; /* The word being sung: gold-leaf spread 2px, a gold-deep underline. */
  --ts-shadow-frame: 0 0 0 1px #1f1a17; /* The icon-black keyline outside an icon frame or a cartouche. */

  /* ---- Type: families ---- */
  --ts-font-display: "Marcellus", "Trajan Pro", Georgia, serif; /* Titles: Roman inscription capitals with a lowercase, one weight (400). */
  --ts-font-serif: "Crimson Pro", Georgia, "Times New Roman", serif;
  --ts-font-coptic: "CSU Avva Shenouda", "Noto Sans Coptic", "Segoe UI Historic", sans-serif;
  --ts-font-arabic: "Noto Naskh Arabic", "Geeza Pro", Tahoma, serif;
  --ts-font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ts-font-icons: FontAwesome;

  /* ---- Type: styles (size, leading, weight) ---- */
  /* Display */
  --ts-display-xl-size: 56px; --ts-display-xl-leading: 1.04; --ts-display-xl-weight: 400; /* The cover and the home page's one title. letterSpacing .02em. */
  --ts-display-l-size: 44px; --ts-display-l-leading: 1.08; --ts-display-l-weight: 400; /* A hymn page's English title in the page header (38px under 600px). */
  --ts-display-m-size: 34px; --ts-display-m-leading: 1.12; --ts-display-m-weight: 400; /* A season or series title; the English name in the niche header. */
  --ts-display-s-size: 24px; --ts-display-s-leading: 1.2; --ts-display-s-weight: 400; /* Section headers with an ornament (SectionHeader). In text (icon-black) on light ... */
  --ts-title-size: 28px; --ts-title-leading: 1.15; --ts-title-weight: 400; --ts-title-tracking: .01em; /* A page title, Marcellus, 24 to 28px, never uppercased by CSS. */
  --ts-section-size: 20px; --ts-section-leading: 1.3; --ts-section-weight: 400; --ts-section-tracking: .01em; /* A section head (Recordings), Marcellus, not uppercased. */
  --ts-display-xs-size: 15px; --ts-display-xs-leading: 1.3; --ts-display-xs-weight: 400; /* Rare display capitals (a cartouche); kickers and the menu are now Figtree ... */
  /* Coptic */
  --ts-coptic-initial-size: 96px; --ts-coptic-initial-leading: 1; --ts-coptic-initial-weight: 400; /* The illuminated initial's letter (IlluminatedInitial), cinnabar on gold-leaf. ... */
  --ts-coptic-display-size: 48px; --ts-coptic-display-leading: 1.15; --ts-coptic-display-weight: 400; /* A hymn's Coptic name in the page header. */
  --ts-coptic-title-size: 32px; --ts-coptic-title-leading: 1.2; --ts-coptic-title-weight: 400; /* The Coptic name in a card head or a unit, and on the phone header. */
  --ts-coptic-cartouche-size: 22px; --ts-coptic-cartouche-leading: 1.2; --ts-coptic-cartouche-weight: 400; /* Capitals in a name cartouche, letterSpacing .08em, with a .03em stroke for the ... */
  --ts-coptic-line-size: 23.35px; --ts-coptic-line-leading: 1.25; --ts-coptic-line-weight: 400; /* The Coptic of a lesson line: 1.45em of the panel at text-step-3. In text ... */
  --ts-coptic-body-size: 20px; --ts-coptic-body-leading: 1.5; --ts-coptic-body-weight: 400; /* Coptic in a reading block or a card. */
  --ts-coptic-word-size: 19px; --ts-coptic-word-leading: 1.5; --ts-coptic-word-weight: 400; /* An example word on the letter page, the taught letter marked. */
  --ts-coptic-inline-size: 1.12em; --ts-coptic-inline-leading: 1.3; --ts-coptic-inline-weight: 400; /* Coptic inside English text: a name, a title after ::. 1.12em so it matches the ... */
  /* Reading */
  --ts-reading-line-size: 16.9px; --ts-reading-line-leading: 1.25; --ts-reading-line-weight: 500; /* Above each Coptic word of a line: 1.05em of the panel, in gold-deep. */
  --ts-reading-word-size: 15px; --ts-reading-word-leading: 1.5; --ts-reading-word-weight: 400; /* The reading of an example word, italic, in gold-deep. */
  /* English */
  --ts-heading-1-size: 32px; --ts-heading-1-leading: 1.2; --ts-heading-1-weight: 600; /* An article's title and headings where display titles would be too long. */
  --ts-heading-2-size: 24px; --ts-heading-2-leading: 1.25; --ts-heading-2-weight: 600; /* Article sections, dialog titles. In text. */
  --ts-heading-3-size: 20px; --ts-heading-3-leading: 1.3; --ts-heading-3-weight: 600; /* Card and unit titles, subsections. */
  --ts-heading-4-size: 17px; --ts-heading-4-leading: 1.35; --ts-heading-4-weight: 700; /* Small heads: table groups, footnote lists, form sections. */
  --ts-english-line-size: 19.32px; --ts-english-line-leading: 1.4; --ts-english-line-weight: 400; /* The English of a line: 1.2em of the panel, in text-muted. */
  --ts-lead-size: 21px; --ts-lead-leading: 1.5; --ts-lead-weight: 400; /* The first paragraph of an article or a page intro. */
  --ts-body-size: 18px; --ts-body-leading: 1.55; --ts-body-weight: 400; /* Running text, in text. Measure 60 to 75 characters. */
  --ts-body-s-size: 16px; --ts-body-s-leading: 1.5; --ts-body-s-weight: 400; /* Card text, table cells, list items, dialogs, form values. */
  /* Interface styles, in --ts-font-sans (Figtree) */
  --ts-ui-menu-size: 15px; --ts-ui-menu-leading: 1.35; --ts-ui-menu-weight: 600; /* The header menu and the library menu. */
  --ts-ui-button-size: 15px; --ts-ui-button-leading: 1.35; --ts-ui-button-weight: 600; /* Buttons and chips. */
  --ts-ui-caps-size: 12.5px; --ts-ui-caps-leading: 1.3; --ts-ui-caps-weight: 600; --ts-ui-caps-tracking: .08em; /* Small uppercase labels: the mode, table heads, About labels. */
  --ts-label-size: 15px; --ts-label-leading: 1.3; --ts-label-weight: 600; /* Tabs, form labels (Figtree). */
  --ts-meta-size: 14px; --ts-meta-leading: 1.4; --ts-meta-weight: 400; /* Artist and album lines, counts, help text, in text-muted (Figtree). */
  --ts-caption-size: 13px; --ts-caption-leading: 1.4; --ts-caption-weight: 400; /* Figure captions, footnote lists, badges, tooltips (Figtree). */
  --ts-rubric-size: 14px; --ts-rubric-leading: 1.3; --ts-rubric-weight: 700; /* The speaker of a part, uppercase in cinnabar (accent), letterSpacing .08em, as ... */
  /* Arabic */
  --ts-arabic-display-size: 40px; --ts-arabic-display-leading: 1.5; --ts-arabic-display-weight: 700; /* A hymn's Arabic name in the page header. */
  --ts-arabic-title-size: 28px; --ts-arabic-title-leading: 1.55; --ts-arabic-title-weight: 600; /* Arabic names in card heads and section headers. */
  --ts-arabic-line-size: 20.93px; --ts-arabic-line-leading: 1.6; --ts-arabic-line-weight: 400; /* The Arabic of a line: 1.3em of the panel, in text-muted. */
  --ts-arabic-body-size: 19px; --ts-arabic-body-leading: 1.8; --ts-arabic-body-weight: 400; /* Arabic in a reading block, a quote or a card. */
  --ts-arabic-initial-size: 34px; --ts-arabic-initial-leading: 1.5; --ts-arabic-initial-weight: 700; /* The first word of an Arabic text set as a rubricated opening ... */
  /* Interface */
  --ts-numeric-size: 14px; --ts-numeric-leading: 1.3; --ts-numeric-weight: 400; /* The player's time and countdowns, with tabular figures. */
  --ts-kbd-size: 11px; --ts-kbd-leading: 1.3; --ts-kbd-weight: 400; /* Keyboard hints. */
}

/* Inside a lesson line the sizes are in em of the panel, so the A-/A+ steps scale all four scripts together. */
:root { --ts-coptic-line-em: 1.45em; --ts-reading-line-em: 1.05em; --ts-english-line-em: 1.2em; --ts-arabic-line-em: 1.3em; }

@media (prefers-reduced-motion: reduce) { :root { --ts-duration-fast: 0ms; --ts-duration-base: 0ms; --ts-duration-slow: 0ms; } }