/* Quaverley web tokens — ported from ui/quaverley/lib/design/tokens.dart.
   Paper and ink are the world; gold is reward; vermilion is a fault; the only
   hue is difficulty (grade). */

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces.woff2') format('woff2'),
       url('fonts/Fraunces.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/HankenGrotesk.woff2') format('woff2'),
       url('fonts/HankenGrotesk.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces. */
  --paper: #F8F4EC;
  --paper-raised: #FCFAF5;
  --paper-sunken: #EFE8D9;

  /* Ink and hairline rules. */
  --rule: #D6CCB8;
  --ink: #211D19;
  --ink-muted: #5B5348;
  --ink-faint: #8D8577;

  /* Accents. */
  --gold: #B08A3E;
  --gold-ink: #6F5320;
  --vermilion: #9E2B1B;
  --charcoal: #2B2A33;

  --shadow: 0 1px 2px rgb(33 29 25 / 6%), 0 10px 30px rgb(33 29 25 / 5%);

  /* The device mock has no panel behind it, so its edge and depth carry the
     separation from the page rather than a tonal field. */
  --device-rule: color-mix(in srgb, var(--ink) 30%, var(--rule));
  --shadow-device: 0 1px 2px rgb(33 29 25 / 9%),
    0 8px 18px rgb(33 29 25 / 10%), 0 30px 60px rgb(33 29 25 / 12%);

  /* Type. */
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --display: clamp(2.4rem, 5vw, 3.6rem);
  --h2: clamp(1.75rem, 3.1vw, 2.5rem);
  --h3: 1.3125rem;

  /* Shape and rhythm. */
  --radius: 6px;
  --wrap: 1120px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --band: clamp(3.5rem, 7vw, 6rem);
  --measure: 68ch;

  color-scheme: light;
}

/* Grade families: light to deep within each tier. */
[data-grade='abrsm_initial'] { --grade: #B2C79C; }
[data-grade='abrsm_1'] { --grade: #87A874; }
[data-grade='abrsm_2'] { --grade: #5C7A47; }
[data-grade='abrsm_3'] { --grade: #3A8F7A; }
[data-grade='abrsm_4'] { --grade: #25705B; }
[data-grade='abrsm_5'] { --grade: #124A3B; }
[data-grade='abrsm_6'],
[data-grade='abrsm_7'] { --grade: #A67C2E; }
[data-grade='abrsm_8'] { --grade: #7E5A1E; }
[data-grade='abrsm_8plus'] { --grade: #4A3512; }
[data-grade='arsm'] { --grade: #9B4051; }
[data-grade='lrsm'] { --grade: #7A2B3C; }
[data-grade='frsm'] { --grade: #5A2130; }