/* =============================================================================
   Ardens brand tokens + base styles
   Extracted from https://ardens.eu (Next.js "Coming Soon" page, June 2026).
   See /docs/BRAND.md for provenance of every value.

   Usage: <link rel="stylesheet" href="/styles/brand.css"> at web root.
   Public/ is the FileMiddleware root, so Public/styles/brand.css -> /styles/brand.css.
   ========================================================================== */

/* ----- Self-hosted brand fonts (Poppins display, Inter body) --------------
   Source: Google Fonts via Next.js next/font (SIL Open Font License 1.1).
   Files are the Latin subsets the live site preloads. */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/brand/fonts/poppins-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/brand/fonts/poppins-500-latin.woff2") format("woff2");
}
/* Inter 400 & 500 share one deduped subset on the source site. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/brand/fonts/inter-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/brand/fonts/inter-400-latin.woff2") format("woff2");
}

/* ----- Design tokens ------------------------------------------------------ */

:root {
  /* Color palette (hex from ardens.eu CSS variables + inline page styles) */
  --color-primary: #ff5d15;          /* Ardens orange  (CTA / brand accent) */
  --color-primary-hover: #ff7333;    /* orange-light   (button hover)       */
  --color-accent: #1a3a8f;           /* deep blue glow (logo gradient tint) */

  --color-bg: #0e0d0c;               /* page background (near-black)        */
  --color-surface: #111113;          /* dark-surface   (raised panels)      */
  --color-card: #18181b;             /* dark-card      (cards / inputs)     */
  --color-border: #27272a;           /* grey-border                         */

  --color-text: #ffffff;             /* primary text                        */
  --color-text-muted: rgba(255, 255, 255, 0.6);  /* secondary copy          */
  --color-text-subtle: rgba(255, 255, 255, 0.4); /* captions / cite         */

  --color-success: #ffffff;          /* site has no green; uses white/accent */
  --color-error: #ff6568;            /* red-400 (only error-ish hue on site) */
  --color-black: #000000;
  --color-white: #ffffff;

  /* Translucent surface fills used by the site's pill controls */
  --surface-glass: rgba(255, 255, 255, 0.11);
  --surface-glass-soft: rgba(255, 255, 255, 0.08);

  /* Typography */
  --font-display: "Poppins", system-ui, sans-serif;   /* headings / lockup */
  --font-body: "Inter", system-ui, sans-serif;        /* body copy         */
  --font-weight-normal: 400;
  --font-weight-medium: 500;

  /* Border-radius scale (Tailwind radius vars from the site) */
  --radius-lg: 0.5rem;    /* 8px  */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-2xl: 1rem;     /* 16px */
  --radius-pill: 9999px;  /* fully rounded pills (site's signature shape) */

  /* Spacing: site uses Tailwind's 0.25rem base unit */
  --space-unit: 0.25rem;             /* 4px  */
  --space-1: 0.25rem;                /* 4px  */
  --space-2: 0.5rem;                 /* 8px  */
  --space-3: 0.75rem;                /* 12px */
  --space-4: 1rem;                   /* 16px */
  --space-6: 1.5rem;                 /* 24px */
  --space-8: 2rem;                   /* 32px */

  /* Letter-spacing (uppercase labels on the site are tracked out) */
  --tracking-wide: 0.025em;
  --tracking-label: 0.15em;

  /* Shadow (Tailwind shadow-2xl, the only elevation the site uses) */
  --shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Layout */
  --container-max: 1200px;
}

/* ----- Base element styles ------------------------------------------------ */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  line-height: 1.15;
  margin: 0 0 var(--space-4);
  color: var(--color-text);
}
h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; }

p { margin: 0 0 var(--space-4); }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover { color: var(--color-primary-hover); }

/* Uppercase label, mirrors the site's tracked-out small caps */
.label {
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--color-text-subtle);
}

/* Buttons: pill-shaped, mirroring the site's "Notify Me" CTA. */
button,
.btn {
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: 0.875rem;
  line-height: 1.5;
  cursor: pointer;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.625rem 1.125rem;        /* ~10px 18px, matches site CTA */
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-primary,
button.primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.btn-primary:hover,
button.primary:hover {
  background-color: var(--color-primary-hover);
}

.btn-secondary,
button.secondary {
  background-color: var(--surface-glass);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover,
button.secondary:hover {
  background-color: var(--surface-glass-soft);
  color: var(--color-text);
}

button:disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Inputs styled like the site's email field (transparent on a glass pill). */
input,
select,
textarea {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text);
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 0.625rem 1rem;
}
input::placeholder { color: var(--color-text-subtle); }
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Card surface */
.card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}

/* Centered content container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* Brand lockup helper (white wordmark, sits on the dark background). */
.brand-lockup {
  display: block;
  width: 220px;
  max-width: 60vw;
  height: auto;
}