/* ==========================================================================
   Toffeeblik — design tokens for blauwtoffie.nl
   An old sweet tin: navy tin, cream label, gold trim.
   Change a value here, not in a page. Rules for using them: README.md.
   ========================================================================== */

:root {
  /* ---- Colour: the tin ------------------------------------------------ */
  --tb-tin: #0F2747;            /* page ground; ink on cream */
  --tb-tin-raised: #1B3A63;     /* a panel on the tin, hover on navy */
  --tb-label: #F4EBD8;          /* cream label: hero, cards, long text */
  --tb-paper: #FFFFFF;          /* the "What's in the tin" facts panel */

  /* ---- Colour: trim --------------------------------------------------- */
  --tb-gold: #C8964A;           /* borders, stars, seal, buttons on navy. Never text on cream (2.2:1). */
  --tb-gold-light: #D9A95C;     /* gold on hover */
  --tb-caramel: #9C6B2E;        /* logo shade only */

  /* ---- Colour: text --------------------------------------------------- */
  --tb-ink: #0F2747;            /* headings and links on cream (12.6:1) */
  --tb-ink-body: #3D3020;       /* body text on cream (10.8:1) */
  --tb-ink-toffee: #7A5320;     /* eyebrows and labels on cream (5.7:1) */
  --tb-on-tin: #F4EBD8;         /* text on navy (12.6:1) */
  --tb-on-tin-muted: #D9CFBB;   /* captions and footer on navy (9.7:1) */
  --tb-on-gold: #0F2747;        /* text on gold (5.6:1) */
  --tb-cross: #9C3B2E;          /* the "does not" cross in privacy lists */

  /* ---- Colour: phone frames ------------------------------------------ */
  --tb-phone-bezel: #0F2747;
  --tb-phone-light: #FFFFFF;
  --tb-phone-dark: #101010;

  /* ---- Type ----------------------------------------------------------- */
  --tb-font-display: 'Alfa Slab One', Rockwell, 'Roboto Slab', serif;   /* one weight: 400 */
  --tb-font-body: 'Work Sans', system-ui, -apple-system, sans-serif;    /* 400 500 600 700 */

  --tb-size-hero: clamp(46px, 7vw, 96px);     /* home h1 */
  --tb-size-title: clamp(40px, 6vw, 88px);    /* page h1 (product, about) */
  --tb-size-h2: clamp(30px, 4vw, 44px);
  --tb-size-h3: 34px;                         /* card titles: app names */
  --tb-size-h4: 26px;                         /* sub-sections in long text */
  --tb-size-lead: 20px;
  --tb-size-body: 17px;
  --tb-size-small: 15px;
  --tb-size-fine: 14px;                       /* the floor for body text is 13px */
  --tb-size-eyebrow: 13px;

  --tb-leading-tight: 1.05;
  --tb-leading-body: 1.6;
  --tb-tracking-eyebrow: 0.16em;
  --tb-tracking-nav: 0.1em;

  /* ---- Space (4px steps) --------------------------------------------- */
  --tb-space-1: 4px;
  --tb-space-2: 8px;
  --tb-space-3: 12px;
  --tb-space-4: 16px;
  --tb-space-5: 24px;
  --tb-space-6: 32px;
  --tb-space-7: 48px;
  --tb-space-8: 64px;
  --tb-space-9: 80px;
  --tb-space-10: 96px;

  /* ---- Shape ---------------------------------------------------------- */
  --tb-radius-label: 28px;      /* the outer cream label; inner rings 20px and 15px */
  --tb-radius-ticket: 24px;     /* app cards; inner dashed ring 18px */
  --tb-radius-panel: 6px;       /* the facts panel: square, like a printed label */
  --tb-radius-store: 16px;      /* store and open-app buttons */
  --tb-radius-pill: 999px;
  --tb-radius-phone: 40px;
  --tb-radius-shot: 20px;

  --tb-border-trim: 3px;        /* the gold line on labels */
  --tb-border-dash: 2px;        /* the dashed ring on tickets */
  --tb-touch: 44px;             /* minimum height of anything you can tap */

  /* ---- Layout --------------------------------------------------------- */
  --tb-page-max: 1200px;
  --tb-text-max: 880px;         /* long reading pages (privacy) */
  --tb-gutter: 24px;
}