/* DG theme (Graphical): fonts and tokens shared by the homepage and the
   résumé. Values come from gui/themes/dg.md; read GUI.md before changing
   them. Component rules live with each page. */

@font-face {
  font-family: "LT Superior Serif";
  src: url("assets/fonts/LTSuperiorSerif-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LT Superior Serif";
  src: url("assets/fonts/LTSuperiorSerif-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LT Superior Serif";
  src: url("assets/fonts/LTSuperiorSerif-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fonts. DG names "Sidebar Inter"; mapped to the Google Fonts "Inter" loader. */
  --font-ui: "Inter", sans-serif;
  --weight-ui-regular: 500;
  --weight-ui-medium: 600;
  --weight-ui-heavy: 600;
  --font-brand: "LT Superior Serif", Georgia, serif;
  --weight-brand-regular: 500;
  --weight-brand-medium: 600;
  --weight-brand-heavy: 700;
  --font-editorial: "LT Superior Serif", Georgia, serif;
  --weight-editorial-regular: 500;
  --weight-editorial-medium: 600;
  --weight-editorial-heavy: 700;
  --font-data: "Inter", sans-serif;
  --weight-data-regular: 500;
  --weight-data-medium: 600;
  --weight-data-heavy: 600;

  /* Text steps: size + line height + default tracking travel together */
  --size-xxs: 11px;
  --line-xxs: 15px;
  --letter-spacing-xxs: 0.02em;
  --size-xs: 13px;
  --line-xs: 17px;
  --letter-spacing-xs: 0.01em;
  --size-s: 15px;
  --line-s: 22px;
  --letter-spacing-s: 0.01em;
  --size-m: 17px;
  --line-m: 26px;
  --letter-spacing-m: 0em;
  --size-l: 26px;
  --line-l: 35px;
  --letter-spacing-l: -0.01em;
  --size-xl: 39px;
  --line-xl: 43px;
  --letter-spacing-xl: -0.01em;
  --size-xxl: 52px;
  --line-xxl: 56px;
  --letter-spacing-xxl: -0.02em;
  --tracking-xs: -0.02em;
  --tracking-s: -0.01em;
  --tracking-m: 0em;
  --tracking-l: 0.01em;
  --tracking-xl: 0.02em;

  /* Theme gap: display headlines (homepage hero, case-study titles) need a display size above xxl.
     Floor is xl so phones keep the rotating statements to three lines;
     7.5vw matches the wrap counts the old serif had at 9.5vw.
     Line height keeps xxl's 56/52 ratio. */
  --size-display: clamp(var(--size-xl), 7.5vw, 168px);
  --line-display: 1.08;

  --space-zero: 0px;
  --space-xxs: 5px;
  --space-xs: 10px;
  --space-s: 15px;
  --space-m: 20px;
  --space-l: 30px;
  --space-xl: 40px;
  --space-xxl: 60px;

  --radius-zero: 0px;
  --radius-xs: 6px;
  --radius-s: 12px;
  --radius-m: 16px;
  --radius-l: 23px;
  --radius-xl: 34px;
  --radius-full: 9999px;

  --border-none: 0px;
  --border-s: 1.5px;
  --border-m: 1.5px;
  --border-l: 3px;

  --motion-duration: 180ms;
  --motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-large-duration: 320ms;
  --motion-large-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-popup-scale: 0.98;
  --motion-press-distance: 1px;

  --icon-stroke-width: 2.5;

  /* One-sided divider (DG Separator: neutral-4 at border-s) */
  --divider-top: inset 0 var(--border-s) 0 var(--neutral-4);
  /* DG focus ring: 3px color-1-transparent halo, paired with the outline */
  --focus-ring: 0 0 0 var(--border-l) color-mix(in srgb, var(--color-1-transparent) 24%, transparent);
}

[data-theme="light"] {
  --color-1: #d3a600;
  --color-1-transparent: #d3a60033;
  --neutral-1: #ffffff;
  --neutral-1-transparent: #ffffff33;
  --neutral-2: #faf9f6;
  --neutral-3: #f2f0e9;
  --neutral-3-transparent: #f2f0e933;
  --neutral-4: #e6e3da;
  --neutral-4-transparent: #e6e3da33;
  --neutral-5: #d2cfc5;
  --neutral-6: #a5a196;
  --neutral-7: #777369;
  --neutral-8: #555249;
  --neutral-9: #35332e;
  --neutral-10: #201f1b;
  --neutral-10-transparent: #201f1b33;
  --success: #247052;
  --success-transparent: #24705233;
  --warning: #926318;
  --error: #b34846;
  --border-shadow-s: 0 0 0 1.5px #e6e3da33;
  --shadow-s: 0px 0.5px 1px 0px #201f1b04, 0px 2px 4px 0px #201f1b06;
  --shadow-m: 0px 2px 6px 0px #201f1b06, 0px 8px 24px 0px #201f1b09;
  --shadow-l: 0px 4px 10px 0px #201f1b0b, 0px 16px 40px 0px #201f1b10;
}

[data-theme="dark"] {
  --color-1: #d3a600;
  --color-1-transparent: #d3a60033;
  --neutral-1: #191916;
  --neutral-1-transparent: #19191633;
  --neutral-2: #20201c;
  --neutral-3: #292923;
  --neutral-3-transparent: #29292333;
  --neutral-4: #37372f;
  --neutral-4-transparent: #37372f33;
  --neutral-5: #4b4a40;
  --neutral-6: #77756a;
  --neutral-7: #aaa79b;
  --neutral-8: #cbc8bc;
  --neutral-9: #e6e3d9;
  --neutral-10: #faf9f4;
  --neutral-10-transparent: #faf9f433;
  --success: #88cbaa;
  --success-transparent: #88cbaa33;
  --warning: #ddbc74;
  --error: #ee9991;
  --border-shadow-s: inset 0 0 0 1.5px #37372f33;
  --shadow-s: 0px 0.5px 1px 0px #19191604, 0px 2px 4px 0px #19191606;
  --shadow-m: 0px 2px 6px 0px #19191606, 0px 8px 24px 0px #19191609;
  --shadow-l: 0px 4px 10px 0px #1919160b, 0px 16px 40px 0px #19191610;
}