/* LINKA design tokens - generated from source/tokens.json by scripts/build-tokens.mjs. Do not edit by hand. */

/* Light theme is the default. Dark: put data-theme="dark" on <html> or any container. */
:root, [data-theme="light"] {
  color-scheme: light;
  /* color */
  --linka-blue: #00AEEF; /* 2020 guideline. The blue K in the logo, supporting headlines, bold contrasting graphics. 2.53:1 on white: graphics and large display only, never small text on white. 6.44:1 on linka-black. */
  --ocean-blue: #009BD5; /* 2020 guideline. Deeper blue for fills, buttons and links. 3.16:1 on white: OK for large/bold text and UI marks, not body copy. */
  --dark-grey: #939598; /* 2020 guideline. The silver-grey of the logo, display/header and body text. 3.0:1 on white: meets large-text only. For text under 18px use slate. */
  --light-grey: #FAFAFA; /* 2020 guideline. Soft page and section background. */
  --white: #FFFFFF; /* 2020 guideline. Primary ground. */
  --slate: #63666A; /* From the 2016 guideline (PMS Cool Gray 10), not in 2020. Kept as the accessible text grey: 5.77:1 on white, 5.53:1 on light-grey. */
  --linka-black: #231F20; /* From the 2016 guideline (PMS Neutral Black). Dark ground and strongest ink. The 2020 guideline has no black. */
  --surface: var(--white); /* Page background. */
  --surface-alt: var(--light-grey); /* Alternating sections and cards. Dark value is a step lighter than linka-black (assumed). */
  --ink: var(--linka-black); /* Strongest text when grey won't hold up (16.3:1). */
  --heading: var(--dark-grey); /* Display and header text (Lato Medium, 48pt+): silver-grey on white per 2020. Large sizes only. */
  --body: var(--slate); /* Running text. The 2020 guideline sets body in #939598; on white that is 3.0:1, so body here uses slate on white and dark-grey on black (5.43:1). Switch to dark-grey only for body set 18px+. */
  --accent: var(--linka-blue); /* Supporting headlines (Lato Medium, uppercase), the blue K, graphic accents. */
  --action: var(--ocean-blue); /* Buttons, links, interactive fills. White text on it is 3.16:1: bold labels 14px+. */
  --on-action: var(--white); /* Text and icons on ocean-blue. */

  /* type: use as  font: var(--text-display); letter-spacing: var(--text-display-tracking); */
  --font-sans: "Lato", "Helvetica Neue", Arial, sans-serif;
  --text-display: 500 48px/56px var(--font-sans); /* Lato Medium 48pt, tracking 25, color heading (#939598). */
  --text-display-tracking: 0.025em;
  --text-header: 500 32px/40px var(--font-sans); /* Section headers. 2020 lists header at the same 48pt as display; 32px is the screen step below it. Color heading. */
  --text-header-tracking: 0.025em;
  --text-supporting-headline: 500 20px/28px var(--font-sans); /* Lato Medium, UPPERCASE, tracking 0, color accent (#00AEEF). Set copy in caps. */
  --text-supporting-headline-tracking: 0;
  --text-body: 500 16px/24px var(--font-sans); /* Lato Medium, tracking 0, color body. */
  --text-body-tracking: 0;
  --text-body-light: 300 16px/24px var(--font-sans); /* Lato Light for long-form or quiet copy, 16px+ only. */
  --text-body-light-tracking: 0;
  --text-emphasis: 700 16px/24px var(--font-sans); /* Lato Bold for inline emphasis and button labels. */
  --text-emphasis-tracking: 0;
  --text-caption: 500 12px/16px var(--font-sans); /* Labels and specs. Color body. */
  --text-caption-tracking: 0.02em;

  /* spacing (8px base. Not defined in either guideline: a starting scale.) */
  --space-1: 8px; /* Icon-to-label gap, tight stacks. */
  --space-2: 16px; /* Inside cards and controls. */
  --space-3: 24px; /* Between related blocks; cover insets. */
  --space-4: 48px; /* Between sections. */

  /* radius (Hard corners echo the wordmark's straight cut strokes. Not defined in either guideline.) */
  --radius-none: 0px; /* Default for blocks, images, slides. */
  --radius-sm: 2px; /* Inputs and buttons. */
  --radius-md: 4px; /* Cards in app UI. */
}

[data-theme="dark"] {
  color-scheme: dark;
  --surface: var(--linka-black);
  --surface-alt: #2E2A2B;
  --ink: var(--white);
  --heading: var(--white);
  --body: var(--dark-grey);
}