/* =========================================================================
   PRINCIPAL — DESIGN TOKENS
   Single source of truth for colors, fonts, spacing, etc.
   ========================================================================= */

:root {
  /* ======================================================================
     PALETTE — 7 COLORS
     Everything else (neutrals, borders) is derived from these via transparency.
     ====================================================================== */
  --color-palark-blue:        #00a1fc;  /* accent (primary) */
  --color-palark-blue-light:  #66c6fd;  /* accent, lighter */

  --color-black:         #000000;  /* primary black (text on light) */
  --color-black-soft:    #4d4d4d;  /* softer black (subheadings on light) */

  --color-white:         #fffcf8;  /* primary white (warm) */
  --color-white-sand:    #f6f3ed;  /* muted sand (bands, header) */
  --color-white-soft:    #b3b3b3;  /* softer white (subheadings on dark) */


  /* ======================================================================
     SEMANTIC
     ====================================================================== */
  --color-bg:            var(--color-white);
  --color-text:          var(--color-black);
  --color-accent:        var(--color-palark-blue);
  --color-accent-light:  var(--color-palark-blue-light);

  /* Functional derivatives */

  /* Neutrals via black/white transparency */
  --color-ink:           var(--color-black);
  --color-ink-70:        var(--color-black-soft);
  --color-ink-50:        rgba(0, 0, 0, 0.45);
  --color-line:          rgba(0, 0, 0, 0.12);
  --color-paper:         var(--color-white);
  --color-paper-2:       var(--color-white-sand);  /* muted band (integrations, header) */
  --color-surface:       var(--color-white);
  --color-ink-surface:   var(--color-black);

  /* Accent: dark / soft tints */
  --color-accent-dark:   color-mix(in srgb, var(--color-accent) 82%, black);
  --color-accent-soft:   color-mix(in srgb, var(--color-accent) 12%, white);


  /* ======================================================================
     TYPOGRAPHY
     Styrene A — UI and body. Bitter — display, h1, h2, h3.
     ====================================================================== */
  --font-sans: 'Styrene A', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --font-serif: 'Bitter', Georgia, 'Times New Roman', serif;

  --font-display: var(--font-serif);
  --font-body:    var(--font-sans);
  --font-accent:  var(--font-serif);

  --fs-display: clamp(2.1rem, 1.2rem + 3.4vw, 3.5rem);
  --fs-h1:      clamp(2.25rem, 1.5rem + 3.4vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  --fs-h3:      clamp(1.35rem, 1.05rem + 1.2vw, 1.65rem);
  --fs-h4:      1.15rem;
  --fs-lead:    clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight:   1.08;
  --lh-heading: 1.15;
  --lh-body:    1.6;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  --tracking-eyebrow: 0.14em;
  --tracking-tight:  -0.02em;

  /* ======================================================================
     SPACING — 4px scale
     ====================================================================== */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  --section-y: clamp(4rem, 2rem + 8vw, 8rem);

  /* ======================================================================
     LAYOUT
     ====================================================================== */
  --container:    1440px;   /* base / max content width */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* ======================================================================
     BREAKPOINTS — 6-step scale (desktop-first, max-width)
     CSS media queries can't read custom properties, so these tokens only
     document the scale. Use the exact px values below in every @media.
       xs   480px  — Mobile
       sm   640px  — Large mobile
       md   768px  — Tablet
       lg  1024px  — Laptop
       xl  1280px  — Desktop
       (max content width = --container: 1440px)
     ====================================================================== */
  --bp-xs:  480px;
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ======================================================================
     RADII
     ====================================================================== */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  24px;
  --radius-xl:  36px;
  --radius-pill: 999px;

  /* ======================================================================
     MISC
     ====================================================================== */
  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}