@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/JetBrainsMono-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/JetBrainsMono-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/JetBrainsMono-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/JetBrainsMono-ExtraBold.woff2") format("woff2");
}

:root {
  color-scheme: dark;


  --bg:           #000000;
  --bg-glow:      rgba(255, 255, 255, 0.02);
  --surface:      #0a0b0d;
  --surface-2:    #101217;
  --surface-3:    #16181e;
  --surface-code: #050506;
  --border:       #1a1d23;
  --border-strong:#2b313a;


  --text:       #f4f5f7;
  --text-muted: #8b9099;
  --text-dim:   #565c66;


  --ui:        #ffffff;
  --ui-dim:    #d6d8dc;
  --ui-soft:   rgba(255, 255, 255, 0.09);
  --ui-line:   rgba(255, 255, 255, 0.24);
  --ui-glow:   rgba(255, 255, 255, 0.30);


  --accent:        #e3b341;
  --accent-2:      #7d8cff;
  --p1-blue:       #58b5e0;
  --accent-hover:  #f0c45c;
  --accent-soft:   rgba(227, 179, 65, 0.14);
  --grad-accent:   linear-gradient(135deg, #e3b341 0%, #c79a32 100%);
  --teal:          #3fb950;
  --teal-soft:     rgba(63, 185, 80, 0.15);
  --link:          #6ea8ff;
  --purple:        #7d8cff;
  --amber:         #cf9b3a;
  --danger:        #f0545c;
  --danger-soft:   rgba(240, 84, 92, 0.14);


  --shadow-sm:   none;
  --shadow-md:   0 24px 70px rgba(0, 0, 0, 0.72);
  --shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 26px rgba(255, 255, 255, 0.22);


  --font-sen:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-caption:    13px;
  --text-mono-sm:    12.5px;
  --text-body-sm:    14px;
  --text-body:       15px;
  --text-heading-sm: 17px;
  --text-heading:    20px;
  --text-heading-lg: 30px;
  --text-display:    40px;

  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-base:  1.5;
  --leading-loose: 1.7;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;


  --space-4:   4px;
  --space-6:   6px;
  --space-8:   8px;
  --space-9:   9px;
  --space-12:  12px;
  --space-13:  13px;
  --space-16:  16px;
  --space-17:  17px;
  --space-20:  20px;
  --space-21:  21px;
  --space-24:  24px;
  --space-25:  25px;
  --space-32:  32px;
  --space-40:  40px;
  --space-50:  50px;


  --radius-sm:   3px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   8px;
  --radius-full: 9999px;


  --topbar-h: 0px;
  --rail-w:   66px;
  --work-max: 1180px;
  --admin-max: none;
  --notes-w: 340px;


  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}


html[data-theme="light"] {
  color-scheme: light;


  --bg:           #f5f6f8;
  --bg-glow:      rgba(0, 0, 0, 0.02);
  --surface:      #ffffff;
  --surface-2:    #f1f3f6;
  --surface-3:    #e7eaef;
  --surface-code: #f3f4f7;
  --border:       #e2e6ec;
  --border-strong:#c5ccd6;


  --text:       #1b1f24;
  --text-muted: #59616c;
  --text-dim:   #8a939f;


  --ui:        #1b1f24;
  --ui-dim:    #3b424b;
  --ui-soft:   rgba(0, 0, 0, 0.06);
  --ui-line:   rgba(0, 0, 0, 0.20);
  --ui-glow:   rgba(0, 0, 0, 0.28);


  --accent:        #a9760f;
  --accent-2:      #4a59d0;
  --p1-blue:       #1f86c2;
  --accent-hover:  #c08c1c;
  --accent-soft:   rgba(169, 118, 15, 0.14);
  --grad-accent:   linear-gradient(135deg, #c08f1e 0%, #a87c16 100%);
  --teal:          #1f9a3c;
  --teal-soft:     rgba(31, 154, 60, 0.14);
  --link:          #2563c9;
  --purple:        #5d4fd0;
  --amber:         #a9741c;
  --danger:        #d2363f;
  --danger-soft:   rgba(210, 54, 63, 0.12);


  --shadow-sm:   0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md:   0 16px 48px rgba(16, 24, 40, 0.18);
  --shadow-glow: 0 0 0 1px rgba(0, 0, 0, 0.20), 0 0 18px rgba(0, 0, 0, 0.08);
}