/* Horula design tokens. One source for the landing and the app. Shared system: 8 point grid, one radius set,
   48 point capsule controls. Blue is the only colour Horula owns. */

:root {
  /* colour */
  --accent: #0a5fd6;          /* actions and links; blue, AA on paper */
  --btn: #0a5fd6;             /* solid buttons, white label */
  --frame: #3d9bff;           /* the thin rule down the window edges */
  --band: #0a5fd6;            /* full-bleed sections, white text AA */
  --band-sub: #dbe8ff;        /* secondary text on the band, AA */
  --band-art: #9cc4ff;        /* halftone on the band */
  --band-line: rgba(255, 255, 255, .26);
  --accent-light: #3d9bff;    /* icon gradient top */
  --accent-deep: #0a5fd6;     /* icon gradient bottom */
  --ring: color-mix(in srgb, var(--accent) 30%, transparent);
  --bg: #ffffff;
  --surface: #f5f5f7;
  --line: #e5e5ea;
  --text: #1d1d1f;
  --sub: #6e6e73;

  /* type */
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;   /* system only: SF, then Lato, then Helvetica */
  --size-title: 34px;         /* section heads: 40 line */
  --size-headline: 20px;      /* card heads: 28 line */
  --size-body: 17px;          /* 24 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-row: 8px;
  --r-pill: 999px;
  --r-sq: 2px;                /* landing buttons and panels */
  --r-icon: 22.5%;
  --motion: .2s ease;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #4da3ff;
    --btn: #0a62d8;
    --frame: #0a62d8;
    --band: #0a4aa8;
    --band-sub: #cfe0ff;
    --band-art: #6aa6f0;
    --bg: #000000;
    --surface: #1c1c1e;
    --line: #38383a;
    --text: #f5f5f7;
    --sub: #98989d;
  }
}