/* ============================================================
   DESIGN TOKENS — generated from Figma Variable Collection
   Source: Portfolio_2026 / Variable collection
   ============================================================ */

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,600;1,9..40,400&family=Inter:wght@400;600&display=swap');

:root {

  /* ----------------------------------------------------------
     TYPOGRAPHY — Font Families
     ---------------------------------------------------------- */
  --font-title:   'DM Sans', sans-serif;
  --font-content: 'Inter', sans-serif;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Font Sizes (Desktop)
     ---------------------------------------------------------- */
  --fs-h1:      80px;
  --fs-h2:      40px;
  --fs-h3:      28px;
  --fs-h4:      22px;
  --fs-h5:      18px;
  --fs-h6:      14px;
  --fs-p:       18px;
  --fs-caption: 16px;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Line Heights
     ---------------------------------------------------------- */
  --lh-title:   1.2;
  --lh-p:       1.6;
  --lh-caption: 1.5;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Letter Spacing
     Title 1, 3, 4, 5, 6: -2% of font size = -0.02em
     Title 2, paragraph, caption: 0
     ---------------------------------------------------------- */
  --ls-tight:  -0.02em;
  --ls-normal:  0em;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Paragraph Spacing
     ---------------------------------------------------------- */
  --paragraph-spacing: 10px;

  /* ----------------------------------------------------------
     COLORS — Text
     ---------------------------------------------------------- */
  --color-text-normal:  #333230;
  --color-text-subtle:  #999691;
  --color-text-white:   #ffffff;

  /* ----------------------------------------------------------
     COLORS — Surface
     ---------------------------------------------------------- */
  --color-surface-white:      #ffffff;
  --color-surface-light-gray: #fafafa;
  --color-surface-dark:       #323330;
  --color-surface-darker:     #272927;

  /* ----------------------------------------------------------
     COLORS — Border
     ---------------------------------------------------------- */
  --color-border-gray: #bfbcb5;

  /* ----------------------------------------------------------
     COLORS — Theme (project-specific)
     ---------------------------------------------------------- */
  --color-primary:    #edb03b;

  /* ----------------------------------------------------------
     SPACING — Gap sizes (Desktop)
     ---------------------------------------------------------- */
  --gap-margin-h5:       8px;   /* margin-bottom after H5 */
  --gap-margin-h3:       16px;  /* margin-bottom after H3 */
  --gap-margin-p:        20px;  /* gap between paragraph text and image/media below */
  --gap-within-s:        24px;  /* gap within a part, small */
  --gap-within-l:        64px;  /* gap within a part, large */
  --gap-between-parts:   80px;  /* gap between parts */
  --gap-between-sections: 120px; /* gap between sections */

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */
  --shadow-default:
    0px 4px 10px -4px rgba(0, 0, 0, 0.15),
    0px 1px 4px  0px rgba(0, 0, 0, 0.15);

  /* ----------------------------------------------------------
     GRID — 12-column layout
     Formula: n columns = (n × 80px) + ((n-1) × 20px) = 100n - 20
     ---------------------------------------------------------- */
  --col-width: 80px;
  --col-gap:   20px;
  --container-max: 1180px;  /* 12 columns = 12×80 + 11×20 */

  /* Column span widths — use as max-width or width on elements */
  --col-1:   80px;   /* 1×80 + 0×20 */
  --col-2:  180px;   /* 2×80 + 1×20 */
  --col-3:  280px;   /* 3×80 + 2×20 */
  --col-4:  380px;   /* 4×80 + 3×20 */
  --col-5:  480px;   /* 5×80 + 4×20 */
  --col-6:  580px;   /* 6×80 + 5×20 */
  --col-7:  680px;   /* 7×80 + 6×20 */
  --col-8:  780px;   /* 8×80 + 7×20 */
  --col-9:  880px;   /* 9×80 + 8×20 */
  --col-10: 980px;   /* 10×80 + 9×20 */
  --col-11: 1080px;  /* 11×80 + 10×20 */
  --col-12: 1180px;  /* 12×80 + 11×20 */

}

/* ============================================================
   MOBILE OVERRIDES
   Breakpoint: ≤ 768px
   ============================================================ */
@media (max-width: 768px) {
  :root {

    /* Font Sizes (Mobile) */
    --fs-h1:      48px;
    --fs-h2:      28px;
    --fs-h3:      24px;
    --fs-h4:      20px;
    --fs-h5:      16px;
    --fs-h6:      14px;
    --fs-p:       16px;
    --fs-caption: 16px;

    /* Spacing (Mobile) */
    --gap-margin-h5:        4px;
    --gap-margin-h3:        12px;
    --gap-margin-p:         24px;
    --gap-within-s:         32px;
    --gap-within-l:         56px;
    --gap-between-parts:    64px;
    --gap-between-sections: 104px;

    /* Grid: fluid on mobile, no fixed column widths */
    --container-max: 100%;

  }
}