/* ============================================================
   Connecta landing: base layer.

   Loaded by both layouts right after /connecta/tokens.css, the generated
   copy of the platform's CSS variables (scripts/tokens/sync-platform-tokens.mjs).
   Every colour, size, radius, shadow and duration comes from that file.
   This file adds only what a browser needs to use them on the landing:
     - the self-hosted Sofia Sans faces and --font-sofia-sans, the font
       binding the platform apps get from next/font;
     - --pattern-grid, the notebook-grid image built from the platform's
       --pattern-grid-line and --pattern-grid-size, and the page ground;
     - the D16 marketing tokens (--mk-*): three heading sizes, the section
       rhythm, the gutter and the two content widths, all derived from the
       platform scale;
     - element defaults on the platform scale.
   It defines no platform token: tests/unit/tokens.test.ts fails if a landing
   stylesheet redeclares one.
   ============================================================ */

/* Sofia Sans for everything, Latin and Cyrillic. Self-hosted variable woff2
   (weights 1-1000), split by unicode-range so a page only downloads the
   subsets it uses. SIL OFL, see /fonts/sofia-sans/OFL.txt. */
@font-face { font-family: "Sofia Sans"; font-style: normal; font-display: swap; font-weight: 1 1000; src: url(/fonts/sofia-sans/sofia-sans-cyrillic-ext-wght-normal.woff2) format("woff2-variations"), url(/fonts/sofia-sans/sofia-sans-cyrillic-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Sofia Sans"; font-style: normal; font-display: swap; font-weight: 1 1000; src: url(/fonts/sofia-sans/sofia-sans-cyrillic-wght-normal.woff2) format("woff2-variations"), url(/fonts/sofia-sans/sofia-sans-cyrillic-wght-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Sofia Sans"; font-style: normal; font-display: swap; font-weight: 1 1000; src: url(/fonts/sofia-sans/sofia-sans-latin-ext-wght-normal.woff2) format("woff2-variations"), url(/fonts/sofia-sans/sofia-sans-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Sofia Sans"; font-style: normal; font-display: swap; font-weight: 1 1000; src: url(/fonts/sofia-sans/sofia-sans-latin-wght-normal.woff2) format("woff2-variations"), url(/fonts/sofia-sans/sofia-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; }
@font-face { font-family: "Sofia Sans"; font-style: italic; font-display: swap; font-weight: 1 1000; src: url(/fonts/sofia-sans/sofia-sans-cyrillic-ext-wght-italic.woff2) format("woff2-variations"), url(/fonts/sofia-sans/sofia-sans-cyrillic-ext-wght-italic.woff2) format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Sofia Sans"; font-style: italic; font-display: swap; font-weight: 1 1000; src: url(/fonts/sofia-sans/sofia-sans-cyrillic-wght-italic.woff2) format("woff2-variations"), url(/fonts/sofia-sans/sofia-sans-cyrillic-wght-italic.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Sofia Sans"; font-style: italic; font-display: swap; font-weight: 1 1000; src: url(/fonts/sofia-sans/sofia-sans-latin-ext-wght-italic.woff2) format("woff2-variations"), url(/fonts/sofia-sans/sofia-sans-latin-ext-wght-italic.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Sofia Sans"; font-style: italic; font-display: swap; font-weight: 1 1000; src: url(/fonts/sofia-sans/sofia-sans-latin-wght-italic.woff2) format("woff2-variations"), url(/fonts/sofia-sans/sofia-sans-latin-wght-italic.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; }

/* Caveat, the handwritten accent: 600 only, one short accent per page (PM
   decision D16), on .mk-hand. Self-hosted Latin + Cyrillic subsets. */
@font-face { font-family: "Caveat"; font-style: normal; font-display: swap; font-weight: 600; src: url(/fonts/caveat/caveat-cyrillic-ext-600-normal.woff2) format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Caveat"; font-style: normal; font-display: swap; font-weight: 600; src: url(/fonts/caveat/caveat-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Caveat"; font-style: normal; font-display: swap; font-weight: 600; src: url(/fonts/caveat/caveat-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Caveat"; font-style: normal; font-display: swap; font-weight: 600; src: url(/fonts/caveat/caveat-latin-600-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; }

:root {
  /* The platform's --font-sans starts with var(--font-sofia-sans), which
     next/font defines in the apps; the landing self-hosts the same face. */
  --font-sofia-sans: "Sofia Sans";
  /* The notebook grid as a background image, from the platform's line and
     cell tokens (32px cells, 8% ink on --pattern-paper). */
  --pattern-grid:
    linear-gradient(var(--pattern-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--pattern-grid-line) 1px, transparent 1px);

  /* Marketing latitude (PM decision D16), derived from the platform scale.
     Three heading sizes: display sizes are clamp() between scale steps. */
  --mk-display: clamp(var(--t-h2), 6vw, var(--t-display-lg)); /* page hero, 31-70 */
  --mk-h2: clamp(var(--t-h3), 3.4vw, var(--t-h1));            /* section heading, 24-40 */
  --mk-h3: clamp(var(--t-h4), 2.2vw, var(--t-h3));            /* card and sub-section title, 20-24 */
  /* One section rhythm: 56-96px of vertical space, on the spacing scale. */
  --mk-section-y: clamp(var(--s-9), 8vw, var(--s-11));
  --mk-gutter: clamp(var(--s-4), 5vw, var(--s-6));            /* 16-24px side padding */
  /* Two content widths, matching the canonical breakpoints (760 / 1180). */
  --mk-wide: 1180px;
  --mk-narrow: 760px;
}

/* Form controls don't inherit the page font by default (UA stylesheet: Arial). */
button, input, select, textarea { font-family: inherit; }

html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background-color: var(--pattern-paper);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* The page ground: the platform notebook grid, once, for every page
   (design-language.md "Backgrounds"). Sections may lay a tint over it. */
body {
  background-image: var(--pattern-grid);
  background-size: var(--pattern-grid-size) var(--pattern-grid-size);
  background-position: -1px -1px;
}

h1, .h1 { font-size: var(--t-h1); font-weight: var(--w-bold); line-height: var(--lh-tight); letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--t-h2); font-weight: var(--w-bold); line-height: var(--lh-snug);  letter-spacing: -0.015em; }
h3, .h3 { font-size: var(--t-h3); font-weight: var(--w-semi); line-height: var(--lh-snug);  letter-spacing: -0.01em; }
h4, .h4 { font-size: var(--t-h4); font-weight: var(--w-semi); line-height: var(--lh-snug); }

p { font-size: var(--t-body); line-height: var(--lh-normal); text-wrap: pretty; }
small, .meta { font-size: var(--t-caption); color: var(--fg-2); }
code, kbd, pre, samp { font-family: var(--font-sans); font-size: 0.92em; }

/* The one handwritten accent a page may carry (D16): a short decorative note,
   never a heading, a label or anything a reader must act on. */
.mk-hand { font-family: "Caveat", "Comic Sans MS", cursive; font-weight: 600; }

::selection { background: var(--connecta-lime); color: var(--connecta-ink); }

/* Lime is the highlight / underline colour for emphasised words in copy. */
mark, .highlight {
  background: var(--connecta-lime);
  color: var(--connecta-ink);
  padding: 0 0.12em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* The one focus ring (design-language.md "Focus"): 2px ink at 2px offset on
   controls, for keyboard users only. A dark ground sets --mk-focus to the
   light ink so the ring stays visible there. Fields take the soft focus
   instead (PM D13): the border steps to --neutral-500, with the ink halo. */
:root { --mk-focus: var(--connecta-ink); }
.on-ink { --mk-focus: var(--fg-on-ink); }
:focus-visible { outline: 2px solid var(--mk-focus); outline-offset: 2px; }
:is(input, textarea, select):focus-visible { outline: none; border-color: var(--neutral-500); box-shadow: 0 0 0 3px var(--tint-ink); }

/* Reduced motion: every animation, the infinite loops included, runs once and
   at once; transitions and smooth scrolling stop. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}