/* ==========================================================================
   tokens.css — the single source of truth for the design system
   Change a value here and it propagates everywhere. Nothing below this file
   should hard-code a colour, a font size or a spacing step.
   ========================================================================== */

:root {
  /* ---------- Typeface ------------------------------------------------- */
  /* The original renders in the classic grotesque stack, not the platform UI
     face. Every line break in the reference is consistent with Helvetica /
     Arial metrics and inconsistent with Segoe UI, so this stack is what keeps
     the text wrapping in the same places. */
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---------- Type scale ----------------------------------------------- */
  --text-label: 0.75rem;   /* HI, I'M SARAH / EDUCATION / WORK / ...       */
  --text-entry: 0.875rem;  /* entry meta, titles and skill values          */
  --text-body: 0.85rem;    /* intro paragraphs                             */
  --text-detail: 0.8rem;   /* entry descriptions                           */
  --text-contact: 0.85rem; /* footer rows                                  */
  --text-heading: 1rem;    /* CONTACT                                      */

  --leading-body: 2;       /* 27.2px at 13.6px */
  --leading-detail: 1.6;   /* 20.5px at 12.8px */
  --leading-entry: 1.6;    /* 22.4px at 14px   */
  --leading-flat: 1.4;

  --tracking-label: 0.16em;
  --tracking-heading: 0.24em;

  --weight-regular: 400;
  --weight-bold: 700;

  /* ---------- Colour ---------------------------------------------------- */
  --color-surface: #ffffff;
  --color-ink: #111111;        /* headings and entry titles                */
  --color-body: #3d3d3d;       /* intro paragraphs                         */
  --color-detail: #6b6b6b;     /* entry descriptions                       */
  --color-meta: #a8a8a8;       /* dates and row labels                     */
  --color-rule: #e4e4e4;       /* hairline dividers                        */

  --color-inverse-surface: #1c1c1c;
  --color-inverse-ink: #ffffff;
  --color-inverse-meta: #8f8f8f;

  /* ---------- Layout ---------------------------------------------------- */
  --container-max: 1172px;
  --container-gutter: 56px;

  --col-intro: 320px;    /* fixed width of the first column                */
  --col-meta: 150px;     /* the date / label column inside an entry        */
  --grid-gap: 64px;      /* space between the three columns                */
  --entry-gap: 28px;     /* space between an entry's meta and its body     */

  --photo-width: 320px;
  --photo-height: 360px;
  /* The portrait is a tall studio headshot. The frame is deeper than the
     original's landscape band so the whole head and shoulders fit; anchoring
     the crop to the top keeps the hair from being clipped. */
  --photo-focus: 50% 0%;

  /* ---------- Spacing --------------------------------------------------- */
  --space-page-top: 96px;
  --space-page-bottom: 80px;
  --space-photo-to-heading: 30px;
  --space-heading-to-text: 24px;
  --space-paragraph: 20px;
  --space-label-to-entries: 32px;
  --space-entries: 20px;
  --space-title-to-detail: 0px;
  --space-rule-above: 48px;
  --space-rule-below: 32px;
  --space-contact-above: 40px;

  --contact-padding-block: 44px;
  --contact-padding-inline: 48px;
  --contact-title-gap: 32px;
  --contact-column-gap: 104px;
  --contact-row-gap: 12px;
  --contact-pair-gap: 10px;
}