/* ==========================================================================
   BREAKPOINTS
   Media queries can't read CSS custom properties, so the values live here as
   the single reference, and every @media rule below uses one of them with a
   matching label comment. Change a breakpoint = search for its label.

   Name       Query                         Range           Layout
   ---------  ----------------------------  --------------  -----------------------------
   mobile     (max-width: 47.99rem)         0 – 767px       Everything stacked
   tablet     (min-width: 48rem)            768px and up    Hero side by side, card uses the
                                                            Desktop layout but 1 per row,
                                                            buttons in a row
   desktop    (min-width: 64rem)            1024px and up   Cards 2 per row, label / content
                                                            sections (CV, projects)    
   (below desktop: (max-width: 63.99rem) — stacked layouts, 0 – 1023px)
   wide       — (no query)                  1440px and up   Content capped at 1312px by
                                                            .container max-width

   Figma: Project card "Breakpoint=Mobile" < 768px, "Breakpoint=Desktop" ≥ 768px.
   Type sizes and spacing between 390px and 1440px are fluid (clamp), not
   breakpoint-based.
   ========================================================================== */

/* ==========================================================================
   tokens.css
   Design tokens, taken from the Figma file "Portfolio" → page "Design System"
   (Foundations / Colors, Typography, Spacing & Radius).

   Fluid values interpolate between the two Figma breakpoints:
   Mobile 390px  →  Desktop 1440px.
   Formula: clamp(mobile, intercept + slope·vw, desktop)
   ========================================================================== */

:root {
  /* ---- Colour: neutrals & accent ------------------------------------- */
  --color-bg:            #faf8f3;
  --color-surface:       #f4f2f0;
  --color-surface-white: #ffffff;
  --color-cream:         #faf8f3;
  --color-border:        #e4e0d6;
  --color-dashed-border: #c9c4b5;
  --color-accent:        #b5502e;
  --color-text-primary:  #1e1b16;
  --color-text-body:     #2a2721;
  --color-text-muted:    #6b675e;
  --color-text-faint:    #8b8779; /* ≈3.6:1 on white: decorative / large text only */

  /* ---- Colour: card & banner gradients --------------------------------
     Project-agnostic, like Figma's "Gradient" variables. Pick a colour per
     project (homepage card + project header banner). Direction: left → right. */
  --gradient-orange-start:   #ffede3;
  --gradient-orange-end:     #f5ece7;
  --gradient-lavender-start: #eeecf9;
  --gradient-lavender-end:   #efeef3;
  --gradient-mint-start:     #e7f4f0;
  --gradient-mint-end:       #ecf1f0;

  --gradient-direction: to right;

  /* ---- Typography ---------------------------------------------------- */
  --font-heading: "Bricolage Grotesque", "Bricolage Grotesque Fallback", Arial, sans-serif;
  --font-body:    "Noto Sans", "Noto Sans Fallback", Arial, sans-serif;

  /* Mobile → Desktop sizes (Figma "Responsive" collection) */
  --type-display:  clamp(2.5rem, 1.9429rem + 2.2857vw, 4rem);      /* 40 → 64 */
  --type-title:    clamp(2.5rem, 2.1286rem + 1.5238vw, 3.5rem);    /* 40 → 56 */
  --type-h2:       clamp(1.75rem, 1.4714rem + 1.1429vw, 2.5rem);   /* 28 → 40 */
  --type-h3:       clamp(1.25rem, 1.1571rem + 0.3810vw, 1.5rem);   /* 20 → 24 */
  --type-h4:       clamp(1rem, 0.9536rem + 0.1905vw, 1.125rem);    /* 16 → 18 */
  --type-body-lg:  clamp(1.125rem, 1.0786rem + 0.1905vw, 1.25rem); /* 18 → 20 */
  --type-subtitle: clamp(1rem, 0.9536rem + 0.1905vw, 1.125rem);    /* 16 → 18 */
  --type-body:     1rem;      /* 16 */
  --type-body-sm:  0.875rem;  /* 14 */
  --type-caption:  0.8125rem; /* 13 */
  --type-label:    0.625rem;  /* 10 */
  --type-nav:      clamp(1rem, 0.9536rem + 0.1905vw, 1.125rem);    /* 16 → 18 */
  --type-button:   1rem;      /* 16 */
  --type-link:     1.125rem;  /* 18 */
  --type-logo:     1.125rem;  /* 18 */

  --leading-display: 1.1;
  --leading-heading: 1.2;
  --leading-body:    1.5;
  --leading-small:   1.45;
  --leading-caption: 1.4;
  --leading-button:  1.3;

  /* ---- Spacing scale ------------------------------------------------- */
  --space-2xs: 0.25rem; /*  4 */
  --space-xs:  0.5rem;  /*  8 */
  --space-sm:  0.75rem; /* 12 */
  --space-md:  1rem;    /* 16 */
  --space-lg:  1.25rem; /* 20 */
  --space-xl:  1.5rem;  /* 24 */
  --space-2xl: 2rem;    /* 32 */
  --space-3xl: 3rem;    /* 48 */
  --space-4xl: 4rem;    /* 64 */

  /* ---- Responsive layout tokens (Desktop / Mobile) --------------------- */
  --space-page-x:   clamp(1.5rem, 0.5714rem + 3.8095vw, 4rem);  /* 24 → 64  */
  --space-section:  clamp(4rem, 2.7rem + 5.3333vw, 7.5rem);     /* 64 → 120 */
  --space-nav-gap:  clamp(0rem, -0.1857rem + 0.7619vw, 0.5rem); /* 0 → 8 (nav buttons have their own padding) */
  --space-contact-top: clamp(6rem, 4.5143rem + 6.0952vw, 10rem);  /* 96 → 160 */
  --space-footer-top:  clamp(4.5rem, 3.3857rem + 4.5714vw, 7.5rem); /* 72 → 120 */
  --grid-gutter:    1rem;                                         /* 16 */
  --size-button-height: 3.5rem;                                   /* 56 (48 on mobile, see below) */
  --content-max:    82rem;                                        /* 1312 = 1440 − 2×64 */

  /* ---- Radius -------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   24px;   /* all images & image placeholders */
  --radius-pill: 200px;

  /* ---- Shadows ------------------------------------------------------- */
  --shadow-mockup-color: rgb(31 26 20 / 0.12); /* device mockups on project cards */

  /* ---- Motion -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 250ms;

  /* ---- Focus --------------------------------------------------------- */
  --focus-ring: 2px solid var(--color-accent);
  --focus-offset: 3px;
}

@media (max-width: 47.99rem) { /* bp: mobile (< 768px) */
  :root {
    --size-button-height: 3rem; /* 48 */
  }
}