/* =========================================================================
   Neural Content-Analyse Studio — design tokens
   Mirrors react/globals.css from the design system bundle.
   ========================================================================= */

@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-300.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Neutrals */
  --color-white: #ffffff;
  --color-neutral-lightest: #f2f2f2;
  --color-neutral-lighter: #d8d8d8;
  --color-neutral-light: #b2b2b2;
  --color-neutral: #808080;
  --color-neutral-dark: #4d4d4d;
  --color-neutral-darker: #1a1a1a;
  --color-neutral-darkest: #010101;

  /* Chromatic — golden grass */
  --color-golden-grass-lightest: #fbf6ea;
  --color-golden-grass-lighter: #f7edd5;
  --color-golden-grass-light: #6f9ee6;
  --color-golden-grass: #4b83d8;
  --color-golden-grass-dark: #3a68b5;
  --color-golden-grass-darker: #564212;
  --color-golden-grass-darkest: #41320d;

  /* Chromatic — puerto rico (teal) */
  --color-puerto-rico-lightest: #eaf7f7;
  --color-puerto-rico-light: #72cdc9;
  --color-puerto-rico: #36b8b2;
  --color-puerto-rico-dark: #2b938e;

  /* Alphas */
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-15: rgba(255, 255, 255, 0.15);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-30: rgba(255, 255, 255, 0.3);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-black-10: rgba(0, 0, 0, 0.1);
  --color-black-15: rgba(0, 0, 0, 0.15);
  --color-black-20: rgba(0, 0, 0, 0.2);
  --color-black-30: rgba(0, 0, 0, 0.3);
  --color-black-50: rgba(0, 0, 0, 0.5);

  /* Type scale — desktop (≥992px) */
  --text-h1: 5.25rem;     /* 84px */
  --text-h2: 3.75rem;     /* 60px */
  --text-h3: 3rem;        /* 48px */
  --text-h4: 2.5rem;      /* 40px */
  --text-h5: 2rem;        /* 32px */
  --text-h6: 1.625rem;    /* 26px */
  --text-large: 1.625rem; /* 26px */
  --text-medium: 1.25rem; /* 20px */
  --text-regular: 1.125rem;/* 18px */
  --text-small: 1rem;     /* 16px */
  --text-tiny: 0.75rem;   /* 12px */

  /* Radii */
  --radius-button: 6.25rem;
  --radius-card: 0;
  --radius-image: 0;
  --radius-form: 0.75rem;

  /* Containers */
  --container-xxl: 80rem;
  --container-xl: 64rem;
  --container-lg: 48rem;
  --container-md: 35rem;

  /* Easing & timing for in-design motion */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-cinema: cubic-bezier(0.16, 0.84, 0.24, 1);
}

/* Mobile type ramp — applied below 992px */
@media (max-width: 991.98px) {
  :root {
    --text-h1: 3rem;
    --text-h2: 2.75rem;
    --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.75rem;
    --text-tiny: 0.625rem;
  }
}

/* Schemes — only the two used in the site map (1 = dark, 2 was originally light;
   but per sitemap most sections are scheme 1, so the page is overwhelmingly dark).
   We keep scheme-2 here for completeness, mapped to dark per globals.css. */
.scheme-1 {
  --scheme-bg: var(--color-neutral-darkest);
  --scheme-fg: var(--color-neutral-darker);
  --scheme-text: var(--color-white);
  --scheme-border: var(--color-white-20);
  --scheme-accent: var(--color-golden-grass);
  background-color: var(--scheme-bg);
  color: var(--scheme-text);
}
.scheme-2 {
  --scheme-bg: var(--color-neutral-darkest);
  --scheme-fg: var(--color-neutral-darker);
  --scheme-text: var(--color-white);
  --scheme-border: var(--color-white-20);
  --scheme-accent: var(--color-golden-grass);
  background-color: var(--scheme-bg);
  color: var(--scheme-text);
}
.scheme-4 {
  --scheme-bg: var(--color-neutral-darkest);
  --scheme-fg: var(--color-neutral-dark);
  --scheme-text: var(--color-white);
  --scheme-border: var(--color-white-20);
  --scheme-accent: var(--color-white);
  background-color: var(--scheme-bg);
  color: var(--scheme-text);
}