/* ==========================================================================
   Chant — Design Tokens
   Sage-green liturgical/scholarly system derived from the brand concept.
   Import this file or copy the :root block into the app's global stylesheet.
   ========================================================================== */

:root {
  /* --- Color roles --- */
  --c-sage:            #6F7D5E; /* primary brand / icon tile */
  --c-sage-deep:       #647155; /* gradient bottom, pressed states */
  --c-forest:          #3C4A32; /* headlines, primary text on cream */
  --c-ink:             #2F3327; /* neumes, body ink */

  --c-cream:           #F3EFE2; /* page background */
  --c-cream-raised:    #FAF7EF; /* cards, surfaces */
  --c-parchment:       #ECE6D5; /* subtle panels, wells */

  --c-terracotta:      #B5673F; /* primary accent, dividers, CTAs */
  --c-terracotta-soft: #E7D3C6; /* accent tint backgrounds */
  --c-brass:           #C9A24B; /* gold ribbon / highlight accent */

  /* --- Neutrals / lines --- */
  --c-rule:            #D9D2BF; /* hairline borders */
  --c-staff:           #C7BFA8; /* notation staff lines */
  --c-muted:           #7C7864; /* secondary text */

  /* --- Overlay roles (art/photo hero surfaces) --- */
  --overlay-text:       #FDF8F0;
  --overlay-muted:      rgba(255, 255, 255, 0.82);
  --overlay-panel:      rgba(255, 255, 255, 0.13);
  --overlay-panel-hover: rgba(255, 255, 255, 0.24);
  --overlay-border:     rgba(255, 255, 255, 0.2);

  /* --- Semantic --- */
  --c-success:         #4A5740;
  --c-success-soft:    #E4E8DC;
  --c-warning:         #B5673F;
  --c-warning-soft:    #F0E2D6;

  /* --- Typography --- */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-chant: "EB Garamond", "Iowan Old Style", Georgia, serif; /* Latin syllables */

  --fs-display: clamp(2.75rem, 6vw, 4.5rem);
  --fs-h1: 2.1rem;
  --fs-h2: 1.5rem;
  --fs-h3: 1.15rem;
  --fs-body: 1rem;
  --fs-body-lg: 1.125rem;
  --fs-small: 0.85rem;
  --fs-label: 0.78rem;
  --fs-kicker: 0.72rem;

  --lh-tight: 1.15;
  --lh-body: 1.6;
  --lh-ui: 1.35;
  --tracking-kicker: 0.28em;
  --tracking-label: 0.08em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Layout --- */
  --container-max: 1120px;
  --reader-max: 1040px;
  --paper-width-letter: 8.5in;
  --paper-margin: 0.75in;
  --gutter-min: 1rem;  /* 16px */
  --gutter-max: 2rem;  /* 32px */

  /* --- Radii --- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-tile: 26%;   /* squircle icon tiles */
  --r-pill: 999px;

  /* --- Component sizing --- */
  --control-h: 44px;
  --control-h-lg: 52px;
  --focus-ring: 0 0 0 3px rgba(181, 103, 63, 0.28);

  /* --- Interaction timing --- */
  --motion-fast: 0.08s;
  --motion-base: 0.15s;
  --motion-slow: 0.18s;
  --ease-standard: ease;

  /* --- Spacing scale (4px base) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* --- Elevation --- */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 10px 12px -8px rgba(44, 38, 32, 0.18);
  --shadow-popover: 0 10px 26px rgba(0, 0, 0, 0.18);
  --shadow-hero: 0 22px 48px -28px rgba(43, 38, 32, 0.65);
  --shadow-paper: 0 1px 2px rgba(0, 0, 0, 0.05), 0 24px 60px -34px rgba(43, 38, 32, 0.5);
  --shadow-focus: 0 0 0 3px rgba(181, 103, 63, 0.28);

  /* Legacy aliases while existing screens migrate. */
  --shadow-1: var(--shadow-card);
  --shadow-2: var(--shadow-hover);
  --shadow-3: var(--shadow-hero);
}