/* Base: IBM Plex Sans font faces, design tokens, element defaults, buttons and focus. */

/* IBM Plex Sans Variable, latin subset, weights 100 to 700 */
@font-face { font-family: "Plex"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("/fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2-variations"), url("/fonts/ibm-plex-sans-latin-wght-normal.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; }
/* Metric-matched fallback so the font swap does not shift layout */
@font-face { font-family: "Plex Fallback"; src: local("Arial"), local("Helvetica Neue"); size-adjust: 101%; ascent-override: 101%; descent-override: 27%; line-gap-override: 0%; }

:root {
  /* CanoSync design system, chapter 1: color tokens (light values only; no dark mode on the site). */
  --page: #ffffff;
  --surface: #ffffff;            /* cards, fields, plain buttons */
  --surface-frame: #f3f6f7;      /* tinted bands */
  --surface-sunk: #f6f8f9;       /* disabled field, hover with a mouse */
  --surface-track: #eef1f3;      /* tracks, pressed with a mouse */
  --line: #d3d9dd;               /* edges of cards, fields, chips */
  --line-row: #e6eaed;           /* hairlines between rows and sections */
  --text: #1a1f24;
  --text-2: #56616a;             /* secondary lines, 6.3:1 on white */
  --text-3: #6b757d;             /* small print on white only, 4.7:1 */
  --text-faint: #8b959c;         /* placeholders only */
  --main: #2b64a2;               /* the main button */
  --main-pressed: #1f4f80;       /* main button hover and pressed */
  --on-main: #ffffff;
  --link: #2b64a2;               /* links and the words of a plain button */
  --plain-edge: #95b2d1;         /* 1px edge of a plain button */
  --logo-teal: #368ea1;
  --picked-bg: #e9f7f4;          /* soft teal: tinted bands and picked things */
  --picked-text: #1f4f80;
  --picked-edge: #368ea1;
  --gradient: linear-gradient(180deg, #2b64a2, #368ea1 55%, #45b9a5);  /* card stripe; vertical because the stripe runs top to bottom */
  --ink: #17324d;                /* focus ring only */
  --ok: #1e7a3a; --ok-bg: #ecf6ef; --ok-line: #b9dbc3;
  --wait: #2a62b8; --wait-bg: #eef3fb; --wait-line: #bfd0ee;
  --warn: #8a5a00; --warn-bg: #fdf6e7; --warn-line: #ead39f; --warn-mark: #b7791f;
  --bad: #a32d2d; --bad-bg: #fbefef; --bad-line: #ebc2c2;
  --field: #88949a;              /* form input borders only: 3:1 non-text contrast (WCAG 1.4.11); --line is too faint for this */
  --r-small: 4px; --r-control: 8px; --r-card: 12px; --r-pill: 999px;
  --wrap: 1240px;
  --gutter: clamp(16px, 5vw, 56px);
  --section: clamp(64px, 8vw, 112px);
  --fade: clamp(96px, 14vw, 200px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --display: "Plex", "Plex Fallback", ui-sans-serif, system-ui, sans-serif;
  --body: "Plex", "Plex Fallback", ui-sans-serif, system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { interpolate-size: allow-keywords; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; scrollbar-color: var(--line) transparent; }
body { margin: 0; background: var(--page); color: var(--text); font: 400 1.0625rem/1.7 var(--body); font-synthesis: none; font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; caret-color: var(--main); }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); color: var(--text); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem); font-weight: 300; line-height: 1.08; letter-spacing: -.022em; max-width: 15em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.625rem); font-weight: 300; line-height: 1.15; letter-spacing: -.018em; }
h3 { font-size: 1.0625rem; font-weight: 500; line-height: 1.35; letter-spacing: -.005em; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--link); text-decoration-color: rgba(43, 100, 162, .35); text-underline-offset: .22em; text-decoration-thickness: 1px; transition: color 180ms ease, text-decoration-color 180ms ease; }
a:hover { color: var(--main-pressed); text-decoration-color: currentColor; }
/* Selection: picked teal. */
::selection { background: var(--picked-bg); color: var(--picked-text); }
/* Focus: 2px ink ring with a 2px gap in the page colour. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-small); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--text); color: #fff; padding: 8px 16px; border-radius: var(--r-control); z-index: 50; }
.skip:focus { left: 8px; } .skip:hover { color: #fff; }
.fine { font-size: .84375rem; line-height: 1.55; letter-spacing: .005em; color: var(--text-2); }

/* Buttons (design system 2.5): main is filled --main, plain is a surface with a --plain-edge border; 8px corner. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: var(--r-control); font: 500 .9375rem/1 var(--body); letter-spacing: .005em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 120ms ease; }
.btn-primary { background: var(--main); color: var(--on-main); }
.btn-quiet { background: var(--surface); color: var(--link); border-color: var(--plain-edge); }
@media (hover: hover) {
  .btn-primary:hover { background: var(--main-pressed); color: var(--on-main); }
  .btn-quiet:hover { background: var(--surface-sunk); color: var(--link); }
}
/* Press state comes after the hover rules so it wins on every button. */
.btn-primary:active { background: var(--main-pressed); }
.btn-quiet:active { background: var(--surface-track); }
.btn:active { transform: scale(.985); }
.btn-sm { min-height: 44px; padding: 0 16px; }
.btn-block { width: 100%; }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }