/* 4EBIT Design System — all tokens consolidated for Django static serving */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap");

@font-face {
  font-family: "Ginora Sans"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/GinoraSans-Light.otf") format("opentype");
}
@font-face {
  font-family: "Ginora Sans"; font-weight: 300; font-style: italic; font-display: swap;
  src: url("../vendor/fonts/GinoraSans-LightOblique.otf") format("opentype");
}
@font-face {
  font-family: "Ginora Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/GinoraSans-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Ginora Sans"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("../vendor/fonts/GinoraSans-Oblique.otf") format("opentype");
}
@font-face {
  font-family: "Ginora Sans"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/GinoraSans-SemiBold.otf") format("opentype");
}
@font-face {
  font-family: "Ginora Sans"; font-weight: 600; font-style: italic; font-display: swap;
  src: url("../vendor/fonts/GinoraSans-SemiBoldOblique.otf") format("opentype");
}
@font-face {
  font-family: "Ginora Sans"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/GinoraSans-Bold.otf") format("opentype");
}
@font-face {
  font-family: "Ginora Sans"; font-weight: 700; font-style: italic; font-display: swap;
  src: url("../vendor/fonts/GinoraSans-BoldOblique.otf") format("opentype");
}

:root {
  /* ---- Brand red ---- */
  --red-700: #8E0C10;
  --red-600: #A50F13;
  --red-500: #CD1318;
  --red-400: #E5484D;
  --red-200: #F6B6B8;
  --red-100: #FFE2E3;
  --red-50:  #FFF1F1;

  /* ---- Ink ---- */
  --ink-900: #14171B;
  --ink-800: #1B1F24;
  --ink-700: #232830;
  --ink-600: #2D333B;
  --ink-500: #353B42;

  /* ---- Slate ---- */
  --slate-600: #404952;
  --slate-500: #55606A;
  --slate-400: #8A9196;
  --slate-300: #AEB4B9;

  /* ---- Gray ---- */
  --gray-200: #DDE0E3;
  --gray-150: #E2E5E8;
  --gray-100: #EDEEF0;
  --gray-75:  #F4F5F6;
  --gray-50:  #F8F9FA;
  --white:    #FFFFFF;

  /* ---- Functional ---- */
  --green-500: #2E9E5B; --green-100: #E2F4E9;
  --amber-500: #E0930F; --amber-100: #FBEFD6;
  --blue-500:  #2D6CDF; --blue-100:  #E1EAFB;

  /* ---- Semantic aliases ---- */
  --brand:          var(--red-500);
  --brand-hover:    var(--red-600);
  --brand-active:   var(--red-700);
  --brand-bright:   var(--red-400);
  --brand-tint:     var(--red-100);
  --brand-wash:     var(--red-50);
  --on-brand:       var(--white);

  --text-strong:    var(--ink-800);
  --text-secondary: var(--slate-500);
  --text-muted:     var(--slate-400);
  --text-disabled:  var(--slate-300);
  --text-inverse:   var(--white);
  --text-inverse-muted: rgba(255,255,255,0.66);
  --text-brand:     var(--red-500);

  --surface-page:   var(--white);
  --surface-tint:   var(--gray-50);
  --surface-card:   var(--white);
  --surface-subtle: var(--gray-75);
  --surface-dark:   var(--ink-800);
  --surface-dark-2: var(--ink-700);
  --surface-dark-3: var(--ink-600);

  --border-subtle:  var(--gray-100);
  --border-default: var(--gray-150);
  --border-strong:  var(--gray-200);
  --border-dark:    var(--ink-500);
  --divider:        var(--gray-100);

  --focus-ring:     rgba(205,19,24,0.25);
  --overlay-scrim:  rgba(20,23,27,0.55);

  --success: var(--green-500); --success-bg: var(--green-100);
  --warning: var(--amber-500); --warning-bg: var(--amber-100);
  --info:    var(--blue-500);  --info-bg:    var(--blue-100);
  --danger:  var(--red-500);   --danger-bg:  var(--red-100);

  /* ---- Typography ---- */
  --font-display: "Ginora Sans", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-sans:    "Ginora Sans", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-brand-ext: "Ginora Sans", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

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

  --text-display:   3.5rem;
  --lh-display:     1.02;
  --text-h1:        2.5rem;
  --lh-h1:          1.08;
  --text-h2:        1.875rem;
  --lh-h2:          1.15;
  --text-h3:        1.375rem;
  --lh-h3:          1.25;
  --text-h4:        1.125rem;
  --lh-h4:          1.35;
  --text-body-lg:   1.0625rem;
  --lh-body-lg:     1.6;
  --text-body:      0.9375rem;
  --lh-body:        1.6;
  --text-sm:        0.8125rem;
  --lh-sm:          1.5;
  --text-xs:        0.6875rem;
  --lh-xs:          1.45;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-overline: 0.14em;

  /* ---- Spacing ---- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-12: 6rem;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --border-hairline: 1px;
  --border-thick: 2px;
  --accent-bar: 4px;

  --shadow-xs: 0 1px 2px rgba(20,23,27,0.06);
  --shadow-sm: 0 1px 3px rgba(20,23,27,0.08), 0 1px 2px rgba(20,23,27,0.04);
  --shadow-md: 0 4px 12px rgba(20,23,27,0.08), 0 1px 3px rgba(20,23,27,0.05);
  --shadow-lg: 0 12px 32px rgba(20,23,27,0.12), 0 4px 8px rgba(20,23,27,0.06);
  --shadow-brand: 0 6px 20px rgba(205,19,24,0.28);

  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: var(--space-5);

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  background: var(--surface-tint);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

::selection {
  background: var(--brand);
  color: var(--on-brand);
}