/* ============================================================
   Nizdos — Design Foundations
   Color tokens + type scale + font faces
   ============================================================
   Locked decisions:
   - Accent: oxblood (#6B1D22)
   - Display + body: EB Garamond (variable)
   - UI sans:        Work Sans   (variable)
   - Mono / IPA:     JetBrains Mono (variable)
   ============================================================ */

/* -------------------- Font faces -------------------- */
@font-face {
  font-family: "EB Garamond";
  src: url("./fonts/EBGaramond-VF.woff2") format("woff2-variations"),
       url("./fonts/EBGaramond-VF.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("./fonts/EBGaramond-Italic-VF.woff2") format("woff2-variations"),
       url("./fonts/EBGaramond-Italic-VF.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("./fonts/WorkSans-VF.woff2") format("woff2-variations"),
       url("./fonts/WorkSans-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-VF.woff2") format("woff2-variations"),
       url("./fonts/JetBrainsMono-VF.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* -------------------- Tokens -------------------- */
:root {
  /* ----- Color: Paper & Ink (neutrals) ----- */
  --paper-50:  #FBF8F2;
  --paper-100: #F6F1E7;
  --paper-200: #ECE4D2;
  --paper-300: #DCD2BB;
  --paper-400: #B8AC91;

  --ink-900: #1A1714;
  --ink-800: #2B2620;
  --ink-700: #3D362D;
  --ink-600: #5A5044;
  --ink-500: #7A6F5F;

  /* ----- Color: Accent (oxblood) ----- */
  --accent-100: #F4E6E6;
  --accent-200: #E8D2D3;
  --accent-700: #8B2A2F;
  --accent-800: #6B1D22;
  --accent-900: #4A1418;

  /* ----- Color: Marginalia (links, annotations) ----- */
  --marginalia-100: #E8EEF4;
  --marginalia-200: #D4DEE7;
  --marginalia-500: #5B7B97;
  --marginalia-700: #2E5475;
  --marginalia-900: #1F3A52;

  /* ----- Color: Semantic ----- */
  --success-200: #DCE5CF;
  --success-700: #4A6B3A;
  --warning-200: #EFDEB8;
  --warning-700: #9C6B1F;
  --danger-200:  #E8D2D3;
  --danger-700:  #8B2A2F;

  /* ----- Color: Night (dark mode) ----- */
  --night-bg:      #18130E;
  --night-surface: #211B14;
  --night-raised:  #2B231A;
  --night-divider: #3A3026;
  --night-ink:     #EDE4D2;
  --night-ink-2:   #BFB39A;
  --night-ink-3:   #8C8170;
  --night-accent:  #C97A7E;

  /* ----- Color: Functional aliases ----- */
  --bg:             var(--paper-50);
  --surface:        var(--paper-100);
  --surface-2:      var(--paper-200);
  --divider:        var(--paper-200);
  --divider-strong: var(--paper-300);

  --fg:        var(--ink-900);
  --fg-2:      var(--ink-600);
  --fg-3:      var(--ink-500);
  --fg-muted:  var(--paper-400);

  --accent:        var(--accent-800);
  --accent-hover:  var(--accent-700);
  --accent-press:  var(--accent-900);
  --accent-tint:   var(--accent-100);

  --link:       var(--marginalia-700);
  --link-hover: var(--marginalia-900);

  --selection-bg: var(--accent-200);
  --selection-fg: var(--ink-900);

  /* ----- Type: Families ----- */
  --serif: "EB Garamond", "Iowan Old Style", "Palatino", Georgia, serif;
  --sans:  "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ----- Type: Scale (font-size / line-height) ----- */
  --fs-display-xl: 56px;  --lh-display-xl: 1.02;
  --fs-display-l:  44px;  --lh-display-l:  1.05;
  --fs-display-m:  34px;  --lh-display-m:  1.10;

  --fs-h1: 28px;  --lh-h1: 1.15;
  --fs-h2: 22px;  --lh-h2: 1.20;
  --fs-h3: 18px;  --lh-h3: 1.30;

  --fs-body-l: 19px; --lh-body-l: 1.55;
  --fs-body:   16px; --lh-body:   1.55;
  --fs-body-s: 14px; --lh-body-s: 1.50;

  --fs-ui-label:    13px; --lh-ui-label: 1.35;
  --fs-ui-caption:  12px; --lh-ui-caption: 1.40;
  --fs-ui-overline: 11px; --lh-ui-overline: 1.30;

  --fs-mono: 13px;  --lh-mono: 1.40;

  /* ----- Type: Weights ----- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ----- Type: Letter-spacing ----- */
  --tracking-display: -0.01em;
  --tracking-tight:   -0.005em;
  --tracking-normal:  0;
  --tracking-overline: 0.14em;
  --tracking-smallcaps: 0.06em;

  /* ----- Spacing scale (4px base) ----- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-18: 72px;
  --space-24: 96px;
  --space-32: 128px;

  /* ----- Radii ----- */
  /* Books are sharp. Anything > 8px is consumer-tech territory. */
  --radius-0:    0;
  --radius-1:    2px;     /* default — buttons, marks, inputs */
  --radius-2:    4px;     /* cards, modals */
  --radius-3:    8px;     /* large surfaces */
  --radius-pill: 999px;   /* tags, chips */
  --radius-app-icon-ios:    22.4%;  /* iOS continuous corner — % of icon size */
  --radius-app-icon-android: 26%;

  /* ----- Hairlines & borders ----- */
  --hairline:        1px solid var(--paper-400);
  --hairline-strong: 1px solid var(--ink-500);
  --hairline-ink:    1px solid var(--ink-900);
  --hairline-accent: 1px solid var(--accent-700);

  /* ----- Shadows -----
     Four levels including "none". Page is the workhorse; float lifts a
     card off the page; modal pops decisively for overlays. */
  --shadow-page:  0 1px 0 0 rgba(26, 23, 20, 0.14),
                  0 4px 10px 0 rgba(26, 23, 20, 0.18);
  --shadow-float: 0 1px 0 0 rgba(26, 23, 20, 0.16),
                  0 12px 24px -4px rgba(26, 23, 20, 0.24);
  --shadow-modal: 0 1px 0 0 rgba(26, 23, 20, 0.14),
                  0 24px 48px -8px rgba(26, 23, 20, 0.28);

  /* Inset shadow — for pressed buttons, inputs */
  --shadow-inset: inset 0 1px 2px 0 rgba(26, 23, 20, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:             var(--night-bg);
    --surface:        var(--night-surface);
    --surface-2:      var(--night-raised);
    --divider:        var(--night-divider);
    --divider-strong: var(--night-divider);

    --fg:       var(--night-ink);
    --fg-2:     var(--night-ink-2);
    --fg-3:     var(--night-ink-3);
    --fg-muted: var(--night-ink-3);

    --accent:       var(--night-accent);
    --accent-hover: #D89498;
    --accent-press: var(--accent-700);
    --accent-tint:  #2E1F1E;

    --link:       #8FAFC9;
    --link-hover: #B8CFE0;
  }
}

/* -------------------- Semantic type styles -------------------- */
/* Apply via class. Components reference these, not raw tokens. */

.t-display-xl { font-family: var(--serif); font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); font-weight: var(--fw-medium); letter-spacing: var(--tracking-display); }
.t-display-l  { font-family: var(--serif); font-size: var(--fs-display-l);  line-height: var(--lh-display-l);  font-weight: var(--fw-medium); letter-spacing: var(--tracking-display); }
.t-display-m  { font-family: var(--serif); font-size: var(--fs-display-m);  line-height: var(--lh-display-m);  font-weight: var(--fw-medium); letter-spacing: var(--tracking-tight); }

.t-h1 { font-family: var(--serif); font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-semibold); }
.t-h2 { font-family: var(--serif); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); }
.t-h3 { font-family: var(--serif); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }

.t-body-l { font-family: var(--serif); font-size: var(--fs-body-l); line-height: var(--lh-body-l); font-weight: var(--fw-regular); }
.t-body   { font-family: var(--serif); font-size: var(--fs-body);   line-height: var(--lh-body);   font-weight: var(--fw-regular); }
.t-body-s { font-family: var(--serif); font-size: var(--fs-body-s); line-height: var(--lh-body-s); font-weight: var(--fw-regular); }

.t-italic    { font-style: italic; }
.t-smallcaps { font-variant: small-caps; letter-spacing: var(--tracking-smallcaps); font-feature-settings: "smcp"; }

.t-ui-label    { font-family: var(--sans); font-size: var(--fs-ui-label);    line-height: var(--lh-ui-label);    font-weight: var(--fw-medium); }
.t-ui-caption  { font-family: var(--sans); font-size: var(--fs-ui-caption);  line-height: var(--lh-ui-caption);  font-weight: var(--fw-regular); color: var(--fg-2); }
.t-ui-overline { font-family: var(--sans); font-size: var(--fs-ui-overline); line-height: var(--lh-ui-overline); font-weight: var(--fw-medium); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--fg-3); }

.t-mono { font-family: var(--mono); font-size: var(--fs-mono); line-height: var(--lh-mono); font-weight: var(--fw-regular); }

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}