/* Surf design system. One source for the landing (copied to web/ by deploy.sh) and the values the app mirrors in RunState.swift.
   One colour: clrs.cc Blue, fading to clrs.cc Navy in the icon like deep water. Dark mode is the deep blue of a FEZ night, the sea after dark.
   Type: Surf Sans (Inter, OFL, quotes redrawn as wave crests). 8 point grid, one radius set, 48 point capsule controls. */
@font-face { font-family: "Surf Sans"; src: url("fonts/SurfSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Surf Sans"; src: url("fonts/SurfSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Surf Sans"; src: url("fonts/SurfSans-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Surf Sans"; src: url("fonts/SurfSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* colour */
  --accent: #0074d9;          /* clrs.cc Blue: links, buttons, highlights, correct answers */
  --accent-light: #0074d9;    /* icon gradient top */
  --accent-deep: #001f3f;     /* icon gradient bottom: clrs.cc Navy */
  --link: #0063ba;
  --btn: #0063ba;          /* white text passes AA */
  --band: #0063ba;
  --band-sub: #d6e8fb;
  --band-art: #7fbdf2;
  --band-line: rgba(255, 255, 255, .24);
  --ring: color-mix(in srgb, var(--accent) 30%, transparent);
  --bg: #fff;
  --surface: #f5f5f7;
  --line: rgba(0, 0, 0, .1);
  --text: #1d1d1f;
  --sub: rgba(29, 29, 31, .6);

  /* type */
  --font: "Surf Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --size-display: 34px;       /* 41 line */
  --size-title: 22px;         /* 28 line */
  --size-body: 17px;          /* 24 line */
  --size-subhead: 15px;       /* 20 line */
  --size-footnote: 13px;      /* 16 line */

  /* space: the 8 point grid */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --measure: 680px;
  --wrap: 1120px;

  /* shape */
  --control: 48px;
  --r-card: 28px;
  --r-group: 20px;
  --r-pill: 999px;
  --r-icon: 22.5%;
  --motion: .2s ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --link: #6cb6ff;
    --bg: #141f33;            /* FEZ night */
    --surface: #1a2740;
    --line: rgba(242, 227, 192, .12);
    --text: #f5f5f7;
    --sub: rgba(245, 245, 247, .6);
  }
}