/* Green Hat Music School: design tokens (style guide v1.0)
   Extracted 2026-10-13 from "Green Hat Style Guide (standalone).html".
   The rules for using these live in green-hat-design-system.md. */

@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;
  src:url("assets/fonts/montserrat-latin-variable.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}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;
  src:url("assets/fonts/montserrat-latin-ext-variable.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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}

:root{
/* Primary palette */
--gh-green:#05AD5D;
--gh-red:#ED242A;
--gh-blue:#395BA9;
--gh-yellow:#F3CC15;
/* Secondary palette */
--gh-aqua:#0FC0DF;
--gh-pink:#D686AA;
--gh-orange:#DB4103;
--gh-orange-bright:#FF7A00; /* solfège Re only: the brand orange sits too close to red */
--gh-bright-green:#05E577;
--gh-purple:#C984FF;
/* Neutrals */
--gh-ink:#111111;
--gh-white:#FFFFFF;
--gh-paper:#FAFAF7;
--gh-gray-100:#F1F1EE;
--gh-gray-300:#D4D4CF;
--gh-gray-600:#5C5C58;
/* Derived */
--gh-green-deep:#04804A;      /* green text/links on white (~5:1) */
--gh-green-hover:#049E55;     /* green fill darkened ~8% */
--gh-yellow-hover:#E0BC12;
--gh-ink-hover:#000000;
/* ~15% tints for tags */
--gh-green-tint:rgba(5,173,93,.15);
--gh-red-tint:rgba(237,36,42,.15);
--gh-blue-tint:rgba(57,91,169,.15);
--gh-yellow-tint:rgba(243,204,21,.15);
--gh-aqua-tint:rgba(15,192,223,.15);
--gh-pink-tint:rgba(214,134,170,.15);
--gh-orange-tint:rgba(219,65,3,.15);
--gh-purple-tint:rgba(201,132,255,.15);

/* Semantic aliases */
--text-body:var(--gh-ink);
--text-secondary:var(--gh-gray-600);
--text-on-dark:var(--gh-white);
--text-link:var(--gh-green-deep);
--text-brand:var(--gh-green-deep);
--surface-page:var(--gh-white);
--surface-soft:var(--gh-paper);
--surface-card:var(--gh-white);
--surface-muted:var(--gh-gray-100);
--surface-brand:var(--gh-green);
--border-default:var(--gh-gray-300);
--border-strong:var(--gh-ink);
--action-primary:var(--gh-green);
--action-primary-hover:var(--gh-green-hover);
--action-accent:var(--gh-yellow);
--focus-ring:var(--gh-blue);
--state-error:var(--gh-red);
--state-success:var(--gh-bright-green);
--accent-trust:var(--gh-blue);
--accent-alert:var(--gh-red);
--accent-joy:var(--gh-yellow);

/* Solfège (Kodály) color coding */
--solfege-do:var(--gh-red);
--solfege-re:var(--gh-orange-bright);
--solfege-mi:var(--gh-yellow);
--solfege-fa:var(--gh-green);
--solfege-so:var(--gh-aqua);
--solfege-la:var(--gh-blue);
--solfege-ti:var(--gh-pink);

/* Program color coding */
--program-little-ones:var(--gh-aqua);
--program-explorers:var(--gh-yellow);
--program-musicians:var(--gh-blue);
--program-private:var(--gh-green);
--program-family:var(--gh-pink);
}

:root{
--gh-font:'Montserrat',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
--gh-font-legacy:'Glacial Indifference','Montserrat',sans-serif;
--font-sans:var(--gh-font);

--fw-regular:400;/* @kind font */--fw-medium:500;/* @kind font */--fw-semibold:600;/* @kind font */--fw-bold:700;/* @kind font */--fw-extrabold:800;/* @kind font */

--fs-display:56px;--lh-display:1.05;/* @kind font */--ls-display:-0.02em;/* @kind font */
--fs-h1:40px;--lh-h1:1.1;/* @kind font */--ls-h1:-0.015em;/* @kind font */
--fs-h2:30px;--lh-h2:1.2;/* @kind font */--ls-h2:-0.01em;/* @kind font */
--fs-h3:22px;--lh-h3:1.3;/* @kind font */
--fs-h4:18px;--lh-h4:1.4;/* @kind font */
--fs-body-lg:18px;--lh-body-lg:1.6;/* @kind font */
--fs-body:16px;--lh-body:1.6;/* @kind font */
--fs-small:14px;--lh-small:1.5;/* @kind font */
--fs-eyebrow:13px;--lh-eyebrow:1.2;/* @kind font */--ls-eyebrow:0.12em;/* @kind font */
--fs-button:16px;--ls-button:0.01em;/* @kind font */

/* Semantic */
--type-display:800 var(--fs-display)/var(--lh-display) var(--gh-font);
--type-h1:800 var(--fs-h1)/var(--lh-h1) var(--gh-font);
--type-h2:700 var(--fs-h2)/var(--lh-h2) var(--gh-font);
--type-h3:700 var(--fs-h3)/var(--lh-h3) var(--gh-font);
--type-h4:600 var(--fs-h4)/var(--lh-h4) var(--gh-font);
--type-body-lg:400 var(--fs-body-lg)/var(--lh-body-lg) var(--gh-font);
--type-body:400 var(--fs-body)/var(--lh-body) var(--gh-font);
--type-small:500 var(--fs-small)/var(--lh-small) var(--gh-font);
--type-eyebrow:700 var(--fs-eyebrow)/var(--lh-eyebrow) var(--gh-font);
--type-button:700 var(--fs-button)/1 var(--gh-font);
}

:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;

--layout-max:1200px;
--layout-content:720px;
--gutter-mobile:16px;
--gutter-desktop:32px;
--section-pad-desktop:64px;
--section-pad-mobile:48px;
--bp-sm:640px;--bp-md:960px;--bp-lg:1200px;

--card-pad:24px;
--btn-pad-y:14px;--btn-pad-x:28px;
--input-pad-y:12px;--input-pad-x:14px;
}

:root{
--gh-radius-sm:8px;
--gh-radius-md:14px;
--gh-radius-lg:24px;
--gh-radius-pill:999px;
--radius-input:var(--gh-radius-sm);
--radius-card:var(--gh-radius-md);
--radius-image:var(--gh-radius-lg);
--radius-button:var(--gh-radius-pill);

--gh-shadow-sm:0 1px 2px rgba(17,17,17,.06),0 1px 3px rgba(17,17,17,.08);
--gh-shadow-md:0 4px 12px rgba(17,17,17,.08);
--gh-shadow-lg:0 12px 32px rgba(17,17,17,.12);
--shadow-card:var(--gh-shadow-sm);
--shadow-card-hover:var(--gh-shadow-md);

--focus-outline:3px solid var(--gh-blue);
--focus-offset:2px;
--input-focus-glow:0 0 0 4px rgba(5,173,93,.18);

--border-input:1.5px solid var(--gh-gray-300);
--border-button:2px solid var(--gh-ink);
--card-strip:6px;

--overlay-max-opacity:.3;/* @kind other */
--ease-out:cubic-bezier(.2,.7,.3,1);/* @kind other */
--dur-fast:120ms;/* @kind other */
--dur-base:180ms;/* @kind other */
}

body{font-family:var(--gh-font);font-size:16px;line-height:1.6;color:var(--gh-ink);background:var(--gh-white);margin:0;-webkit-font-smoothing:antialiased}
a{color:var(--gh-green-deep);font-weight:600;text-decoration:none}
a:hover{text-decoration:underline;color:var(--gh-ink)}