/* === tokens/fonts.css === */
/* Brand type: Zalando Sans SemiExpanded (display/brand) + Inter (technical/info).
   The source uses the "SemiExpanded" width (~112.5). We load the Zalando Sans
   VARIABLE font with its width (wdth) + weight (wght) axes, then pin
   font-variation-settings:"wdth" 112.5 (see --brand-wdth / apply on the brand
   font). Loading "Zalando Sans Expanded" (width 125) instead makes type look
   horizontally stretched — avoid it. Drop in licensed SemiExpanded @font-face
   rules here if available. */
@import url('https://fonts.googleapis.com/css2?family=Zalando+Sans:wdth,wght@75..125,300..900&family=Inter:wght@400;500;600&display=swap');

/* === tokens/colors.css === */
/* Daniel Arcoverde — color tokens. Values transcribed verbatim from the brand board. */
:root{
  /* Core palette */
  --color-purple-900:#322473; /* deep indigo — primary */
  --color-purple-500:#5846A9; /* violet — secondary */
  --color-blue-500:#375ABC;   /* signal blue */
  --color-lavender-100:#EEECF6; /* pale lavender surface */
  --color-sage-300:#D4DDC7;   /* pale sage — accent / on-dark text */
  --color-sage-200:#D1DCAF;   /* lighter sage band */
  --color-lime-500:#94C133;   /* lime — energy accent */
  --color-green-800:#145734;  /* deep green — display word accent */
  --color-ink-800:#29314F;    /* navy ink — technical text */
  --color-black:#000000;
  --color-white:#FFFFFF;

  /* Semantic aliases */
  --brand-primary:var(--color-purple-900);
  --brand-secondary:var(--color-purple-500);
  --brand-accent:var(--color-sage-300);
  --brand-signal:var(--color-blue-500);
  --brand-energy:var(--color-lime-500);

  --surface-base:var(--color-white);
  --surface-lavender:var(--color-lavender-100);
  --surface-sage:var(--color-sage-300);
  --surface-deep:var(--color-purple-900);
  --surface-violet:var(--color-purple-500);

  --text-primary:var(--color-purple-900);
  --text-ink:var(--color-ink-800);      /* Inter technical copy */
  --text-on-dark:var(--color-sage-300); /* headings over deep/violet */
  --text-on-dark-muted:var(--color-lavender-100);
  --text-inverse:var(--color-white);

  --border-hairline:rgba(0,0,0,0.2);
  --border-hairline-violet:rgba(88,70,169,0.2);
}

/* === tokens/typography.css === */
/* Daniel Arcoverde — typography tokens. Scale transcribed from the brand board. */
:root{
  --font-brand:"Zalando Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-info:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --brand-wdth:112.5; /* @kind other */ /* Zalando Sans width axis (SemiExpanded) */

  /* Weights (Zalando Sans SemiExpanded) */
  --fw-light:300;      /* @kind font */
  --fw-regular:400;    /* @kind font */
  --fw-medium:500;     /* @kind font */
  --fw-semibold:600;   /* @kind font */
  --fw-bold:700;       /* @kind font */
  --fw-extrabold:800;  /* @kind font */
  --fw-black:900;      /* @kind font */

  /* Display / heading scale (px, from source) */
  --fs-mega:397.7px;   /* signature word "Daniel" specimen */
  --fs-name:185px;     /* about-page name lockup */
  --fs-section:165px;  /* section-divider label */
  --fs-hero:90px;      /* signature / cover eyebrow */
  --fs-title:65px;     /* topic slide headline */
  --fs-h1:45px;
  --fs-h2:40px;
  --fs-h3:35px;        /* body-lead / subhead, line-height 48px */
  --fs-h4:30px;
  --fs-lead:24px;
  --fs-body:23px;
  --fs-info:17.857px;  /* Inter technical labels */
  --fs-caption:14px;   /* footer, letter-spacing .07em */

  --lh-tight:100%;
  --lh-snug:48px;      /* paired with --fs-h3 lead copy */
  --tracking-caption:0.07em;
}

/* === tokens/spacing.css === */
/* Daniel Arcoverde — spacing & geometry tokens.
   Layout rhythm read from the 1920×1080 brand-board frames. */
:root{
  /* Spacing scale (px) — gaps/paddings seen on the board */
  --space-2:20px;
  --space-3:30px;
  --space-4:45px;
  --space-5:50px;
  --space-6:60px;
  --space-8:80px;   /* slide safe-margin (left/right) */
  --space-10:100px;

  /* Slide geometry */
  --slide-w:1920px;
  --slide-h:1080px;
  --slide-margin:80px;
  --titlebar-h:96px;

  /* Radii — the board favors large, soft photo masks */
  --radius-photo-sm:100px;
  --radius-photo-md:102px;
  --radius-photo-lg:275px;

  /* Borders */
  --border-hairline-w:1px;
}