/* Dolphin design tokens (docs/r2/DESIGN.md §2). Every other stylesheet reads only these
   variables: no raw colours, no raw radii, no raw shadows anywhere else. */
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-var.8e433c0592f7.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-var.ad4eb06671be.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;
  /* No `system-ui`: a platform with none of the named fonts reaches the self-hosted Inter,
     and a phone that has its own never downloads it. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Inter var", "Helvetica Neue", Arial, sans-serif;

  /* colour — light */
  --bg: #FFFFFF;
  --bg-2: #F5F5F7;
  --bg-elev: #FFFFFF;
  --fill: #E9E9EC;
  --fill-press: #DCDCE1;
  --label: #1D1D1F;
  --label-2: #5E5E63;
  --label-3: #8A8A8F;
  --separator: #D9D9DE;
  --outline: #8A8A8F;
  --accent: #0A6770;
  --on-accent: #FFFFFF;
  /* The accent as a filled surface (the primary button, the send button, a switch that is
     on). In light it is the accent itself; in dark the accent is a light tint made for text
     and links, so the fill is a deeper teal that carries white text. */
  --accent-fill: var(--accent);
  --on-accent-fill: #FFFFFF;
  --accent-tint: #E3F1F2;
  --good: #1A7A3C;
  --warn: #8F5400;
  --bad: #B8261B;
  --scrim: rgba(0, 0, 0, 0.32);
  --material: rgba(255, 255, 255, 0.72);
  --on-photo: #FFFFFF;
  --photo-capsule: rgba(0, 0, 0, 0.6);
  --gallery-bg: #000000;

  /* type: weight size/line family — use as `font: var(--t-body)`; tracking beside it */
  --t-display: 700 2.5rem/2.75rem var(--font);      --k-display: -0.022em;
  --t-title1: 700 1.75rem/2.125rem var(--font);     --k-title1: -0.018em;
  --t-title2: 700 1.375rem/1.75rem var(--font);     --k-title2: -0.012em;
  --t-title3: 600 1.25rem/1.5625rem var(--font);    --k-title3: -0.01em;
  --t-headline: 600 1.0625rem/1.375rem var(--font); --k-headline: -0.01em;
  --t-body: 400 1.0625rem/1.5rem var(--font);       --k-body: -0.01em;
  --t-reading: 400 1.1875rem/1.875rem var(--font);  --k-reading: -0.005em;
  --t-callout: 400 1rem/1.3125rem var(--font);      --k-callout: -0.008em;
  --t-subhead: 400 0.9375rem/1.25rem var(--font);   --k-subhead: -0.005em;
  --t-footnote: 400 0.8125rem/1.125rem var(--font); --k-footnote: 0;
  --t-caption: 600 0.75rem/1rem var(--font);        --k-caption: 0.02em;

  /* space — 4-point grid */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.25rem; --s6: 1.5rem;
  --s7: 2rem; --s8: 2.5rem; --s9: 3.5rem; --s10: 4.5rem;
  --gutter: 1rem;
  --section-gap: var(--s7);
  --page-max: 70rem;      /* 1120 */
  --reading-max: 34rem;
  --nav-h: 3.25rem;       /* 52 */
  --target: 44px;         /* the smallest thing a finger must hit */
  --control-h: 3.125rem;  /* 50: inputs and the primary button on a phone */

  /* radii */
  --r-xs: 6px; --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 20px; --r-full: 999px;
  --r-thumb: 10px;        /* the segmented control's thumb */
  --r-bubble: 18px;       /* a message bubble */

  /* elevation — three levels: flat, bar (material), sheet */
  --hairline: 1px;
  --blur: saturate(180%) blur(20px);
  --shadow-sheet: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 12px 48px rgba(0, 0, 0, 0.18);
  --shadow-thumb: 0 1px 3px rgba(0, 0, 0, 0.12);

  /* motion */
  --dur-press: 100ms; --dur-state: 200ms; --dur-sheet: 340ms; --dur-sheet-out: 260ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (min-resolution: 2dppx) { :root { --hairline: 0.5px; } }
@media (min-width: 37.5rem) { :root { --gutter: 2rem; --section-gap: var(--s8); } }
@media (min-width: 64rem) {
  :root {
    --section-gap: var(--s9); --nav-h: 3.5rem; --control-h: 2.75rem;
    --t-display: 700 3.5rem/3.75rem var(--font);
    --t-title1: 700 2.125rem/2.5625rem var(--font);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --bg-2: #1C1C1E; --bg-elev: #1C1C1E; --fill: #2C2C2E; --fill-press: #3A3A3C;
    --label: #F5F5F7; --label-2: #A1A1A6; --label-3: #77777C; --separator: #3A3A3C; --outline: #7C7C82;
    --accent: #5CC8D2; --on-accent: #00292D; --accent-tint: #0F2F32; --accent-fill: #0E7C86; --on-accent-fill: #FFFFFF;
    --good: #5BD083; --warn: #F0B35A; --bad: #FF7B6E;
    --scrim: rgba(0, 0, 0, 0.56); --material: rgba(28, 28, 30, 0.72);
    --shadow-sheet: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 12px 48px rgba(0, 0, 0, 0.6);
    --shadow-thumb: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --bg-2: #1C1C1E; --bg-elev: #1C1C1E; --fill: #2C2C2E; --fill-press: #3A3A3C;
  --label: #F5F5F7; --label-2: #A1A1A6; --label-3: #77777C; --separator: #3A3A3C; --outline: #7C7C82;
  --accent: #5CC8D2; --on-accent: #00292D; --accent-tint: #0F2F32; --accent-fill: #0E7C86; --on-accent-fill: #FFFFFF;
  --good: #5BD083; --warn: #F0B35A; --bad: #FF7B6E;
  --scrim: rgba(0, 0, 0, 0.56); --material: rgba(28, 28, 30, 0.72);
  --shadow-sheet: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 12px 48px rgba(0, 0, 0, 0.6);
  --shadow-thumb: 0 1px 3px rgba(0, 0, 0, 0.4);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }