/* ==========================================================================
   Infeus design tokens
   Every color, font and size on the site comes from this file.

   Layer 1 (primitives): raw values. Change the brand here.
   Layer 2 (themes): what each color is used for. Sections pick a theme
   with a class (.theme-dark / .theme-light / .theme-paper / .theme-accent).
   ========================================================================== */

:root {
  /* ---- Layer 1: primitives ---------------------------------------------- */
  --black: #0a0a0a;
  --white: #ffffff;
  --paper: #f4f3ef;          /* off-white for alternating light sections */

  --grey-800: #1c1c1c;       /* raised surfaces on black */
  --grey-600: #5e5e5e;       /* secondary text on light (6.5:1 on white) */
  --grey-400: #9b9b9b;       /* secondary text on black (7:1 on black) */

  --orange: #ff5a1f;         /* brand accent */
  --orange-dark: #e2460e;    /* hover on light backgrounds */
  --orange-light: #ff7b4a;   /* hover on dark backgrounds */

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --text-xs: 0.75rem;                                   /* 12 */
  --text-sm: 0.875rem;                                  /* 14 */
  --text-base: 1.0625rem;                               /* 17 */
  --text-lg: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);  /* 18-22 */
  --text-xl: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);   /* 22-30 */
  --text-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.75rem);     /* 32-60 */
  --text-hero: clamp(2.75rem, 1.2rem + 6.4vw, 7.5rem);  /* 44-120 */
  --text-contact: clamp(1.75rem, 0.6rem + 5.4vw, 6.25rem);

  --stretch-display: 112%;   /* Archivo width axis for headings */

  /* ---- Layout ----------------------------------------------------------- */
  --max-width: 1320px;
  --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);
  --section-space: clamp(4.5rem, 3rem + 7vw, 10rem);
  --header-height: 4.5rem;
  --radius-pill: 999px;
  --radius: 0.75rem;

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration: 0.6s;
}

/* ---- Layer 2: themes -------------------------------------------------------
   --bg          section background
   --surface     raised elements on top of --bg (cookie banner)
   --fg          main text and logos
   --fg-muted    secondary text
   --line        hairlines and borders (derived from --fg)
   --accent      orange details: buttons, the hero drawing, stack separators
   --accent-hover
   --on-accent   text color on an --accent background (buttons)
   -------------------------------------------------------------------------- */

:root,
.theme-light {
  --bg: var(--white);
  --surface: var(--paper);
  --fg: var(--black);
  --fg-muted: var(--grey-600);
  --line: color-mix(in srgb, var(--fg) 14%, transparent);
  --accent: var(--orange);
  --accent-hover: var(--orange-dark);
  --on-accent: var(--black);
}

.theme-paper {
  --bg: var(--paper);
  --surface: var(--white);
  --fg: var(--black);
  --fg-muted: var(--grey-600);
  --line: color-mix(in srgb, var(--fg) 14%, transparent);
  --accent: var(--orange);
  --accent-hover: var(--orange-dark);
  --on-accent: var(--black);
}

.theme-dark {
  --bg: var(--black);
  --surface: var(--grey-800);
  --fg: var(--white);
  --fg-muted: var(--grey-400);
  --line: color-mix(in srgb, var(--fg) 16%, transparent);
  --accent: var(--orange);
  --accent-hover: var(--orange-light);
  --on-accent: var(--black);
}

.theme-accent {
  --bg: var(--orange);
  --surface: var(--orange-light);
  --fg: var(--black);
  --fg-muted: var(--black);      /* all text stays black: 6.3:1 on orange */
  --line: color-mix(in srgb, var(--fg) 45%, transparent);
  --accent: var(--black);
  --accent-hover: var(--grey-800);
  --on-accent: var(--orange);
}