/* Field Journal tokens. The living spec is /ui-library. */

@font-face {
  font-family: 'Inter';
  src: url(/fonts/inter/InterVariable.woff2) format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url(/fonts/inter/InterVariable-Italic.woff2) format('woff2');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Newsreader';
  src: url(/fonts/newsreader/Newsreader-Variable.woff2) format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: 'Newsreader';
  src: url(/fonts/newsreader/Newsreader-Variable-Italic.woff2) format('woff2');
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Mono';
  src: url(/fonts/roboto-mono/RobotoMono-Variable.ttf) format('truetype');
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
}

@font-face {
  font-family: 'Kalam';
  src: url(/fonts/kalam/Kalam-Bold.woff2) format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 36px;
  --s7: 56px;
  --measure: 66ch;
  --page-width: 920px;
  --gutter: clamp(16px, 4vw, 40px);

  --paper: #f7f6f1;
  --surface: #ffffff;
  --sunk: #f0efe8;
  --ink: #23262d;
  --ink-soft: #5f6470;
  --rule: rgba(35, 38, 45, .12);
  --rule-strong: rgba(35, 38, 45, .32);
  --dash: rgba(35, 38, 45, .2);
  --grid: rgba(35, 38, 45, .117);
  /* Sticky bars reuse the page paper with a fixed attachment, so the dots run under them unbroken. */
  --paper-dots: radial-gradient(circle, var(--grid) 1px, transparent 1.3px) 11px 11px / 22px 22px fixed;
  --line: rgba(53, 92, 170, .09);
  --margin-line: rgba(214, 88, 88, .35);
  --accent: #2348b4;
  --accent-ink: #ffffff;
  --accent-soft: rgba(35, 72, 180, .07);
  --mark: rgba(250, 222, 70, .42);
  --tape: #e8dab3;
  --tape-ink: #3a3326;
  --tape-chip: rgba(255, 255, 255, .45);
  --note: #fbf2c4;
  --success: #286d45;
  --warning: #c48a12;
  --warning-text: #825905;
  --danger: #ad3535;
  --danger-ink: #ffffff;
  --backdrop: rgba(20, 24, 34, .5);
  --shadow-card: 0 1px 1px rgba(35, 38, 45, .06), 0 10px 24px -14px rgba(35, 38, 45, .28);
  --shadow-lift: 0 1px 1px rgba(35, 38, 45, .06), 0 16px 32px -16px rgba(35, 38, 45, .4);
  --shadow-float: 0 24px 64px -16px rgba(0, 0, 0, .45);

  --font-read: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-hand: 'Kalam', 'Segoe Print', cursive;
  --font-data: 'Roboto Mono', ui-monospace, monospace;

  --border-w: 1.5px;
  --radius: 2px;
  --radius-control: 4px;
  --label-font: 600 .7rem/1.3 var(--font-ui);
  --focus: 2px solid var(--accent);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --paper: #15181f;
    --surface: #1d2129;
    --sunk: #252a34;
    --ink: #e7e9ee;
    --ink-soft: #a0a6b3;
    --rule: rgba(231, 233, 238, .12);
    --rule-strong: rgba(231, 233, 238, .3);
  --dash: rgba(231, 233, 238, .18);
    --grid: rgba(231, 233, 238, .081);
    --line: rgba(142, 166, 255, .08);
    --margin-line: rgba(239, 120, 120, .28);
    --accent: #8ea6ff;
    --accent-ink: #12151b;
    --accent-soft: rgba(142, 166, 255, .1);
    --mark: rgba(250, 222, 70, .24);
    --tape: #5e5644;
    --tape-ink: #f1ead8;
    --tape-chip: rgba(0, 0, 0, .28);
    --note: #2a2f3c;
    --success: #6fcf97;
    --warning: #f0c24f;
    --warning-text: #f0c24f;
    --danger: #f08080;
    --danger-ink: #15181f;
    --backdrop: rgba(0, 0, 0, .65);
    --shadow-card: 0 10px 24px -14px rgba(0, 0, 0, .8);
    --shadow-lift: 0 16px 32px -16px rgba(0, 0, 0, .9);
    --shadow-float: 0 24px 64px -16px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}

:root[data-theme=dark] {
  --paper: #15181f;
  --surface: #1d2129;
  --sunk: #252a34;
  --ink: #e7e9ee;
  --ink-soft: #a0a6b3;
  --rule: rgba(231, 233, 238, .12);
  --rule-strong: rgba(231, 233, 238, .3);
  --dash: rgba(231, 233, 238, .18);
  --grid: rgba(231, 233, 238, .081);
  --line: rgba(142, 166, 255, .08);
  --margin-line: rgba(239, 120, 120, .28);
  --accent: #8ea6ff;
  --accent-ink: #12151b;
  --accent-soft: rgba(142, 166, 255, .1);
  --mark: rgba(250, 222, 70, .24);
  --tape: #5e5644;
  --tape-ink: #f1ead8;
  --tape-chip: rgba(0, 0, 0, .28);
  --note: #2a2f3c;
  --success: #6fcf97;
  --warning: #f0c24f;
  --warning-text: #f0c24f;
  --danger: #f08080;
  --danger-ink: #15181f;
  --backdrop: rgba(0, 0, 0, .65);
  --shadow-card: 0 10px 24px -14px rgba(0, 0, 0, .8);
  --shadow-lift: 0 16px 32px -16px rgba(0, 0, 0, .9);
  --shadow-float: 0 24px 64px -16px rgba(0, 0, 0, .8);
  color-scheme: dark;
}