/* Technikhil design tokens.
   Generated from the Technikhil design system (tokens.json); change values there, not here.
   Light theme on :root. Dark follows prefers-color-scheme, high contrast follows
   prefers-contrast: more. data-theme="light" | "dark" on <html> overrides the scheme. */

:root {
  color-scheme: light;
  --paper: #f0ece4;
  --surface: #e4e1d8;
  --ink: #192026;
  --muted: #4c545a;
  --rule: #c7c4bc;
  --accent: #0f6428;
  --accent-hover: #004b19;
  --on-accent: #f8f5ee;
  --focus: #0f6428;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #161b20;
    --surface: #1e2428;
    --ink: #e4e1d8;
    --muted: #b1b8bf;
    --rule: #383e43;
    --accent: #80d58d;
    --accent-hover: #9eeaa9;
    --on-accent: #161b20;
    --focus: #9eeaa9;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #161b20;
  --surface: #1e2428;
  --ink: #e4e1d8;
  --muted: #b1b8bf;
  --rule: #383e43;
  --accent: #80d58d;
  --accent-hover: #9eeaa9;
  --on-accent: #161b20;
  --focus: #9eeaa9;
}

@media (prefers-contrast: more) {
  :root:not([data-contrast="standard"]) {
    color-scheme: light;
    --paper: #fdfcf9;
    --surface: #f2f0ea;
    --ink: #090e12;
    --muted: #3b4146;
    --rule: #7b8186;
    --accent: #024e1b;
    --accent-hover: #013610;
    --on-accent: #fefdfb;
    --focus: #024e1b;
  }
  :root[data-theme="dark"]:not([data-contrast="standard"]) {
    color-scheme: dark;
    --paper: #07090c;
    --surface: #111417;
    --ink: #fbfaf7;
    --muted: #bfc5ca;
    --rule: #6d7277;
    --accent: #98dfa2;
    --accent-hover: #b1f1b9;
    --on-accent: #07090c;
    --focus: #b1f1b9;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-contrast="standard"]) {
    color-scheme: dark;
    --paper: #07090c;
    --surface: #111417;
    --ink: #fbfaf7;
    --muted: #bfc5ca;
    --rule: #6d7277;
    --accent: #98dfa2;
    --accent-hover: #b1f1b9;
    --on-accent: #07090c;
    --focus: #b1f1b9;
  }
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 999px;
  --measure: 720px;
  --avatar: 96px;
  --hairline: 1px;
  --font-sans: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type styles as font shorthands, for elements the markup can't give a class to. */
  --type-display: 800 48px/56px var(--font-sans);
  --tracking-display: -0.02em;
  --type-title: 700 32px/40px var(--font-sans);
  --tracking-title: -0.01em;
  --type-heading: 700 22px/30px var(--font-sans);
  --tracking-heading: normal;
  --type-subheading: 600 18px/28px var(--font-sans);
  --tracking-subheading: normal;
  --type-lede: 400 20px/32px var(--font-sans);
  --tracking-lede: normal;
  --type-body: 400 18px/30px var(--font-sans);
  --tracking-body: normal;
  --type-small: 400 16px/26px var(--font-sans);
  --tracking-small: normal;
  --type-eyebrow: 700 13px/18px var(--font-sans);
  --tracking-eyebrow: 0.1em;
  --type-meta: 400 15px/24px var(--font-mono);
  --tracking-meta: normal;
  --type-code: 400 16px/26px var(--font-mono);
  --tracking-code: normal;
}

.display { font: var(--type-display); letter-spacing: var(--tracking-display); }
.title { font: var(--type-title); letter-spacing: var(--tracking-title); }
.heading { font: var(--type-heading); letter-spacing: var(--tracking-heading); }
.subheading { font: var(--type-subheading); letter-spacing: var(--tracking-subheading); }
.lede { font: var(--type-lede); letter-spacing: var(--tracking-lede); }
.body { font: var(--type-body); letter-spacing: var(--tracking-body); }
.small { font: var(--type-small); letter-spacing: var(--tracking-small); }
.eyebrow { font: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); }
.meta { font: var(--type-meta); letter-spacing: var(--tracking-meta); }
.code { font: var(--type-code); letter-spacing: var(--tracking-code); }

@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2'), url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff') format('woff'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff2') format('woff2'), url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-600.woff') format('woff'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2') format('woff2'), url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff') format('woff'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff2') format('woff2'), url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff') format('woff'); }