/* ==========================================================================
   tokens.css — the design system, as custom properties.

   Every colour, radius, font and rhythm value used anywhere in this project is
   declared here once. Nothing else in the codebase should contain a raw hex
   value. If a token is missing, add it here rather than hard-coding.

   The palette comes from the "organic shapes" direction: a white base with
   flat geometric colour shapes, inspired by Dutch public-transport and
   healthcare poster graphics.
   ========================================================================== */

:root {
  /* ---- Brand colours -------------------------------------------------- */
  --coral: #f0533a;          /* primary accent, CTA, link hover, the mark    */
  --coral-hover: #d8442c;    /* CTA hover                                    */
  --green: #1f6e63;          /* secondary accent, skill outlines, active nav */
  --yellow: #f5c328;         /* accent shapes, outline-button hover, selection */
  --pink: #f2a0ac;           /* accent shapes                                */
  --periwinkle: #a9b7e6;     /* accent shapes                                */
  --ochre: #a9702b;          /* accent shapes, tertiary label text           */

  /* ---- Card background tints ------------------------------------------ */
  --coral-tint: #fdeceb;
  --coral-tint-warm: #fdeae6;
  --green-tint: #e6f0ed;
  --yellow-tint: #fdf3d8;
  --pink-tint: #fbedf0;
  --periwinkle-tint: #edf0fb;
  --surface: #f7f7f7;        /* neutral cards: volunteering, side jobs, contact */

  /* ---- Text colours on tinted cards ---------------------------------- */
  --coral-text: #c2412c;
  --pink-text: #c25d6b;
  --periwinkle-text: #5a6bab;

  /* ---- Neutrals ------------------------------------------------------- */
  --white: #ffffff;
  --ink: #1a1a1a;            /* headings                                    */
  --body: #3c3c3c;           /* body text, page default                     */
  --body-soft: #4a4a4a;      /* intro paragraph                             */
  --muted: #6e6e6e;          /* secondary text                              */
  --label: #8a8a8a;          /* section labels, dates                       */
  --label-soft: #a5a5a5;     /* de-emphasised inline notes                  */
  --dim: #c9c9c9;            /* inactive language toggle                     */
  --nav-link: #5c5c5c;
  --hairline: rgba(26, 26, 26, 0.08); /* section dividers, nav border        */
  --rule: #e8e8e8;           /* CV column rule and timeline spine           */

  /* ---- Typography ----------------------------------------------------- */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Radii ---------------------------------------------------------- */
  --r-card: 22px;            /* large cards: education, work, volunteering  */
  --r-hobby: 20px;
  --r-rail: 18px;            /* side-job carousel cards                     */
  --r-inner: 14px;           /* white thesis block inside a card            */
  --r-panel: 28px;           /* contact panel                               */
  --r-photo: 24px;
  --r-pill: 100px;           /* every pill and button                       */

  /* ---- Layout --------------------------------------------------------- */
  --page: 1120px;            /* content container                           */
  --page-wide: 1160px;       /* nav and hero container                      */
  --gutter: 28px;
  --section-pad: clamp(40px, 5vw, 68px);
  --scroll-offset: 90px;     /* sticky-nav clearance for anchor jumps       */

  /* ---- Motion --------------------------------------------------------- */
  --ease-shape: cubic-bezier(0.22, 0.85, 0.24, 1);
  --reveal-dur: 0.7s;
}

/* ==========================================================================
   Tone classes

   A "tone" bundles the four colours a card needs: the solid shape colour, the
   background tint, the accent text colour, and the text colour that sits on
   top of the solid version. Applying `.t-green` to a card is enough for its
   shape, tint, date and title colours to line up.
   ========================================================================== */

.t-coral      { --tone: var(--coral);      --tone-tint: var(--coral-tint);      --tone-text: var(--coral-text);      --tone-on: var(--white); }
.t-green      { --tone: var(--green);      --tone-tint: var(--green-tint);      --tone-text: var(--green);           --tone-on: var(--white); }
.t-yellow     { --tone: var(--yellow);     --tone-tint: var(--yellow-tint);     --tone-text: var(--ochre);           --tone-on: var(--ink);   }
.t-pink       { --tone: var(--pink);       --tone-tint: var(--pink-tint);       --tone-text: var(--pink-text);       --tone-on: var(--ink);   }
.t-periwinkle { --tone: var(--periwinkle); --tone-tint: var(--periwinkle-tint); --tone-text: var(--periwinkle-text); --tone-on: var(--ink);   }
.t-ochre      { --tone: var(--ochre);      --tone-tint: var(--yellow-tint);     --tone-text: var(--ochre);           --tone-on: var(--white); }