/* ============================================================
   EBRPHA Design System — Tokens
   Faithfully ported from the Relume export (DESIGN.md + globals.css)
   Never hardcode colors / sizes / radii — use these vars.
   ============================================================ */

/* ---- Local fonts ---- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../reference/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../reference/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../reference/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../reference/fonts/inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../reference/fonts/poppins-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../reference/fonts/poppins-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../reference/fonts/poppins-700.woff2") format("woff2");
}

:root {
  /* ---- Neutral ---- */
  --color-white: #ffffff;
  --color-neutral-lightest: #f2f2f2;
  --color-neutral-lighter: #dad9d8;
  --color-neutral-light: #b6b4b2;
  --color-neutral: #85837f;
  --color-neutral-dark: #54524c;
  --color-neutral-darker: #242019;
  --color-neutral-darkest: #0c0800;

  /* alpha helpers */
  --color-white-5: color-mix(in srgb, var(--color-white), transparent 95%);
  --color-white-10: color-mix(in srgb, var(--color-white), transparent 90%);
  --color-white-15: color-mix(in srgb, var(--color-white), transparent 85%);
  --color-white-20: color-mix(in srgb, var(--color-white), transparent 80%);
  --color-white-30: color-mix(in srgb, var(--color-white), transparent 70%);
  --color-white-40: color-mix(in srgb, var(--color-white), transparent 60%);
  --color-white-50: color-mix(in srgb, var(--color-white), transparent 50%);
  --color-nd-5: color-mix(in srgb, var(--color-neutral-darkest), transparent 95%);
  --color-nd-10: color-mix(in srgb, var(--color-neutral-darkest), transparent 90%);
  --color-nd-15: color-mix(in srgb, var(--color-neutral-darkest), transparent 85%);
  --color-nd-20: color-mix(in srgb, var(--color-neutral-darkest), transparent 80%);
  --color-nd-50: color-mix(in srgb, var(--color-neutral-darkest), transparent 50%);

  /* ---- Orient (primary) ---- */
  --color-orient-lightest: #e5eef3;
  --color-orient-lighter: #ccdee8;
  --color-orient-light: #4c8bae;
  --color-orient: #005a8c;
  --color-orient-dark: #004870;
  --color-orient-darker: #002438;
  --color-orient-darkest: #001b2a;

  /* ---- Mojo (red) ---- */
  --color-mojo-lightest: #f9eceb;
  --color-mojo-lighter: #f3d9d7;
  --color-mojo-light: #d57a75;
  --color-mojo: #c3413a;
  --color-mojo-dark: #9c342e;
  --color-mojo-darker: #4e1a17;
  --color-mojo-darkest: #3a1311;

  /* ---- Sea Green ---- */
  --color-sea-green-lightest: #eaf3ee;
  --color-sea-green-lighter: #d5e7dd;
  --color-sea-green-light: #6cad89;
  --color-sea-green: #2e8b57;
  --color-sea-green-dark: #246f45;
  --color-sea-green-darker: #123722;
  --color-sea-green-darkest: #0d291a;

  /* ---- Web Orange ---- */
  --color-web-orange-lightest: #fdf6e5;
  --color-web-orange-lighter: #fcedcc;
  --color-web-orange-light: #f5c24c;
  --color-web-orange: #f2a900;
  --color-web-orange-dark: #c18700;
  --color-web-orange-darker: #604300;
  --color-web-orange-darkest: #483200;

  /* ---- Typography ---- */
  --font-heading: "Poppins", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-weight-bold: 500;

  /* mobile-first sizes */
  --text-h1: 2.75rem;
  --text-h2: 2.5rem;
  --text-h3: 2rem;
  --text-h4: 1.5rem;
  --text-h5: 1.25rem;
  --text-h6: 1.125rem;
  --text-large: 1.125rem;
  --text-medium: 1rem;
  --text-regular: 0.875rem;
  --text-small: 0.8125rem;
  --text-tiny: 0.6875rem;

  /* radii */
  --radius-button: 0;
  --radius-card: 0.5rem;
  --radius-badge: 0;
  --radius-image: 0.5rem;
  --radius-input: 0;

  /* layout */
  --container: 80rem;
  --container-lg: 48rem;
  --gutter: 5%;

  /* spacing rhythm */
  --section-y: 4rem;
}

@media (min-width: 992px) {
  :root {
    --text-h1: 4.5rem;
    --text-h2: 3.25rem;
    --text-h3: 2.75rem;
    --text-h4: 2.25rem;
    --text-h5: 1.75rem;
    --text-h6: 1.375rem;
    --text-large: 1.375rem;
    --text-medium: 1.125rem;
    --text-regular: 1rem;
    --text-small: 0.875rem;
    --text-tiny: 0.75rem;
    --section-y: 7rem;
  }
}

/* ============================================================
   Color schemes — ported exactly from globals.css
   Each scheme sets background, text, accent, border tokens.
   ============================================================ */
.scheme-1 {
  --scheme-bg: var(--color-orient-darkest);
  --scheme-fg: var(--color-orient-darkest);
  --scheme-text: var(--color-white);
  --scheme-muted: var(--color-white-50);
  --scheme-border: var(--color-white-20);
  --scheme-accent: var(--color-white);
  background-color: var(--scheme-bg);
  color: var(--scheme-text);
}
.scheme-2 {
  --scheme-bg: var(--color-orient-darker);
  --scheme-fg: var(--color-orient-darker);
  --scheme-text: var(--color-white);
  --scheme-muted: var(--color-white-50);
  --scheme-border: var(--color-white-20);
  --scheme-accent: var(--color-white);
  background-color: var(--scheme-bg);
  color: var(--scheme-text);
}
.scheme-3 {
  --scheme-bg: var(--color-white);
  --scheme-fg: var(--color-white);
  --scheme-text: var(--color-neutral-darkest);
  --scheme-muted: var(--color-neutral-dark);
  --scheme-border: var(--color-nd-15);
  --scheme-accent: var(--color-orient);
  background-color: var(--scheme-bg);
  color: var(--scheme-text);
}