/* ============================================================================
   Mexican Summer — design tokens
   ----------------------------------------------------------------------------
   Source of truth: mexicansummer.com (see /Users/rutger/site/index.html).
   Extracted verbatim from advertising/index.html, which was the first tool to
   carry the brand and remains the visual reference.

   Every tool loads this file plus the Adobe kit that serves Helvetica Neue
   LT Pro. Both lines belong in the <head>, tokens second:

     <link rel="stylesheet" href="https://use.typekit.net/ivc1nyy.css">
     <link rel="stylesheet" href="../shared/tokens.css">
     <link rel="stylesheet" href="../shared/app.css">

   The Typekit kit stays a <link> rather than an @import here: @import inside a
   stylesheet serialises the two downloads instead of running them in parallel.
   ========================================================================= */

/* Each Avant Garde cut is its own family at weight 400 — asking for
   500/600/700 makes the browser synthesise bold and smear the glyphs.
   Only the three upright cuts are declared because only those are in
   assets/fonts/. The three Oblique cuts exist in the site repo and in the
   original webfont kit; add them here (never synthetic italic) if a tool
   ever needs a real italic. */
@font-face {
    font-family: "ITCAvantGardeGothicExtraLight";
    src: url("../assets/fonts/ITCAvantGardeGothic/ITCAvantGardeGothicExtraLight/font.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "ITCAvantGardeGothicBook";
    src: url("../assets/fonts/ITCAvantGardeGothic/ITCAvantGardeGothicBook/font.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "ITCAvantGardeGothicMedium";
    src: url("../assets/fonts/ITCAvantGardeGothic/ITCAvantGardeGothicMedium/font.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── Brand palette, straight from mexicansummer.com ── */
    --cream: #f0e4cf;
    --cream-deep: #e6d7bd;
    --black: #000000;
    --white: #ffffff;
    --orange: #e85426;
    --amber: #d2962e;

    /* Neutrals derived by sitting black over cream, so greys stay warm */
    --ink-60: rgba(0, 0, 0, .60);
    --ink-45: rgba(0, 0, 0, .45);
    --ink-30: rgba(0, 0, 0, .30);
    --rule: rgba(0, 0, 0, .16);
    --rule-soft: rgba(0, 0, 0, .09);

    /* Status — every value is a brand colour; nothing invented */
    --st-draft: rgba(0, 0, 0, .38);
    --st-pending: #d2962e;
    --st-running: #e85426;
    --st-complete: #000000;
    --st-cancelled: rgba(0, 0, 0, .25);

    --f-ag-xlight: 'ITCAvantGardeGothicExtraLight', 'Avant Garde', 'Century Gothic', sans-serif;
    --f-ag-book: 'ITCAvantGardeGothicBook', 'Avant Garde', 'Century Gothic', sans-serif;
    --f-ag-medium: 'ITCAvantGardeGothicMedium', 'Avant Garde', 'Century Gothic', sans-serif;
    --f-nhg: helvetica-neue-lt-pro, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --f-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    /* The site's type scale is built for a marketing page — 22px body,
       50px headlines. A 15-column planning table can't carry that, so
       the identity (faces, caps, tight tracking, orange accent) is kept
       and only the scale is stepped down to tool density. */
    --t-body: 13px;
    --t-label: 10px;
    --t-head: 15px;

    /* Page frame. Tools share one measure and one gutter so the header rule,
       the stat strip and the tab underline all break at the same x. */
    --page-max: 1680px;
    --page-pad: 28px;
    --page-pad-narrow: 16px;
}