/*
  HummingHub -- Nederlands e-mailmarketingplatform.

  VOOR WIE: Nederlandse marketeers en ondernemers die van Mailchimp of
  ActiveCampaign af willen omdat hun klantdata buiten de EU wordt
  verwerkt. Ze komen voor twee dingen: bewijs dat het hier blijft, en
  bewijs dat het platform gewoon goed is. De site heeft één taak:
  aanmelding voor een gratis account.

  PALETTE: de huisstijl van humminghub.nl, ongewijzigd overgenomen.
    violet  #7C3AED  merkkleur, knoppen, accenten
    azuur   #2563EB  tweede kleur van het verloop in de kop
    cyaan   #06B6D4  eindpunt van het verloop, alleen in vlakken
    inkt    #17181C  tekst, donkere vlakken
    lila    #F6F4FE  zachte achtergrond die secties scheidt
    mint    #10B981  bevestiging: vinkjes, positieve cijfers
  Zes kleuren, elk met één taak. Het verloop violet -> azuur -> cyaan
  is het merk; het staat nooit onder lopende tekst.

  TYPE: Plus Jakarta Sans voor koppen (geometrisch, vriendelijk, past
  bij de kolibrie) en Inter voor lopende tekst en UI. Beide variabel
  en self-hosted -- geen Google-CDN, wat voor een site die AVG als
  argument voert het enige verdedigbare is.

  SIGNATURE: de productmockups. Elke sectie toont een stukje van het
  echte dashboard, in HTML nagebouwd in plaats van als screenshot:
  scherp op elk scherm, en te vertalen zonder Photoshop.

  RONDINGEN: zacht. Kaarten 20px, knoppen volledig rond.
*/

/* Fixes the cascade order for every stylesheet on the site, whatever
   order they are linked in. This statement must stay first. */
@layer tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    /* Identity */
    --color-bg: #ffffff;
    --color-surface: #f4f1fe;
    --color-surface-2: #e6dffb;
    --color-ink: #101116;
    --color-muted: #474b57;
    --color-accent: #7c3aed;
    --color-accent-strong: #6d28d9;
    --color-azure: #2563eb;
    --color-cyan: #06b6d4;
    --color-mint: #10b981;
    --color-on-accent: #ffffff;
    --color-line: #ddd6f3;

    --gradient-brand: linear-gradient(100deg, #7c3aed 0%, #4f46e5 45%, #06b6d4 100%);
    --gradient-text: linear-gradient(92deg, #7c3aed 0%, #2563eb 100%);
    --gradient-dark: linear-gradient(160deg, #1a1533 0%, #101116 55%, #131426 100%);
    --gradient-light: linear-gradient(180deg, #ffffff 0%, #f4f1fe 55%, #e9e3fb 100%);

    --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

    --radius: 1.25rem;
    --radius-s: 0.75rem;
    --radius-pill: 999px;

    --shadow-card: 0 1px 2px rgb(16 17 22 / 0.05), 0 16px 40px -16px rgb(16 17 22 / 0.18);
    --shadow-float: 0 30px 70px -24px rgb(76 29 149 / 0.45);

    /* Structure -- tune if the design needs it, but these work. */

    /* A fluid type scale: sizes interpolate with the viewport, which
       is why this site has no font-size media queries anywhere. */
    --step--1: clamp(0.83rem, 0.80rem + 0.17vw, 0.94rem);
    --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
    --step-1: clamp(1.20rem, 1.11rem + 0.45vw, 1.50rem);
    --step-2: clamp(1.44rem, 1.29rem + 0.75vw, 2.00rem);
    --step-3: clamp(1.73rem, 1.49rem + 1.20vw, 2.66rem);
    --step-4: clamp(2.07rem, 1.71rem + 1.80vw, 3.55rem);
    --step-5: clamp(2.49rem, 1.94rem + 2.75vw, 4.74rem);

    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;

    --measure: 65ch;
    --container: 72rem;
    --gutter: var(--space-m);

    --motion: 200ms cubic-bezier(0.2, 0, 0, 1);
    --motion-entrance: 360ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}