/* Rise Theatre Arts design tokens.
 *
 * GENERATED from the frontmatter of DESIGN.md 1.7 by
 * node test/build-tokens.cjs. Do not edit: change the canonical DESIGN.md
 * in the vault, replace the repo copy from it, then run the script.
 *
 * Names are DESIGN.md's own (the Honest Names Rule), so a token means the
 * same thing in every Rise project. Drop this file in beside DESIGN.md.
 */
:root {
  /* Palette */
  --teal: #2E6B79;
  --deep-indigo: #252A58;
  --mid-teal: #3D8A9A;
  --light-teal: #73DAE5;
  --light-teal-hover: #96E4EC;
  --pink: #D3659B;
  --deep-rose: #B04D81;
  --coral: #D07B5E;
  --coral-light: #DC9880;
  --yellow: #EAD979;
  --yellow-light: #F0E599;
  --cream: #F0FAFB;
  --cream-dark: #DDF0F3;
  --white: #FFFFFF;
  --ink: #1C1C1C;
  --ink-soft: #3D3D3D;
  --ink-muted: #6B6B6B;

  /* Tints and hairlines, derived from the palette (DESIGN.md states these
     as percentages in prose rather than as hexes). */
  --tint-teal: rgba(46,107,121,.12);
  --line-teal: rgba(46,107,121,.2);
  --tint-light-teal: rgba(115,218,229,.25);
  --tint-yellow: rgba(234,217,121,.3);
  --tint-coral: rgba(208,123,94,.16);
  --tint-rose: rgba(176,77,129,.08);
  --tint-ink-muted: rgba(107,107,107,.12);

  /* Corner radii, by the role the shape plays */
  --rounded-control: 4px;
  --rounded-field: 6px;
  --rounded-card: 8px;
  --rounded-card-feature: 10px;
  --rounded-panel: 12px;
  --rounded-modal: 16px;
  --rounded-pill: 20px;

  /* Spacing */
  --space-gutter: 32px;
  --space-gutter-phone: 20px;
  --space-grid-gap: 24px;
  --space-card-padding: 32px;
  --space-section: 80px;
  --space-section-phone: 48px;

  /* Families. The three jobs: Playfair for headings and big numerals,
     Lora for reading, DM Sans for anything you operate. */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: Lora, Georgia, serif;
  --font-ui: 'DM Sans', system-ui, sans-serif;
  --font-code: ui-monospace, Menlo, Consolas, monospace;

  /* Type steps. The tool ramp is what operational screens use; the
     public steps are here for surfaces that read like the website. */
  --text-title: 2rem;
  --text-title-phone: 1.625rem;
  --text-section: 1.375rem;
  --text-section-phone: 1.25rem;
  --text-heading: 1.0625rem;
  --text-caption: 0.8125rem;
  --text-numeral: 2rem;
  --text-numeral-large: 2.5rem;

  /* Motion. DESIGN.md: ease-out for entrances and state changes. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}