/* ==========================================================================
   Collabrum Advisory — Design tokens
   Structure mirrors the reference's token architecture 1:1.
   Colour values derive from the Collabrum logo; every metric is a measured
   value from the reference, not an approximation.
   ========================================================================== */

:root {
  /* ---------- Brand ---------------------------------------------------- */
  --color-primary:          #F09000;   /* logo amber  — accent, CTAs        */
  --color-primary-hover:    #D97F00;
  --color-primary-light:    #FFB245;
  --color-primary-rgb:      240, 144, 0;

  --color-secondary:        #007848;   /* logo green                        */
  --color-secondary-light:  #0A9A5E;
  --color-secondary-rgb:    0, 120, 72;

  --color-deep:             #05341F;   /* dark section fill                 */
  --color-deep-light:       #0A5233;
  --color-deep-rgb:         5, 52, 31;

  /* ---------- Neutrals -------------------------------------------------- */
  --color-ink:              #101010;
  --color-heading:          #14231C;

  /* The reference sets body copy to #777777, which measures 4.48:1 on white
     and 4.14:1 on its own grey card — both below the 4.5:1 AA floor. These are
     the nearest values that pass; the shift is imperceptible side by side.
     #6F6F6F -> 5.02 on white, 4.65 on #F6F6F6.  #6E6E6E -> 5.10 on white. */
  --color-text:             #6F6F6F;
  --color-text-soft:        #6E6E6E;
  --color-eyebrow:          #6D6C74;
  --color-surface:          #F5F9F6;
  --color-gray:             #F6F6F6;
  --color-border:           #E6E8E7;
  --color-border-soft:      #F4F5F8;
  --color-white:            #FFFFFF;
  --color-black:            #000000;

  /* ---------- Foreground pairings -------------------------------------- */
  --on-primary:             #101010;   /* 8.0:1 on amber */
  --on-secondary:           #FFFFFF;
  --on-deep:                #FFFFFF;
  --on-deep-muted:          rgba(255, 255, 255, .72);
  --on-deep-border:         rgba(255, 255, 255, .18);

  /* ---------- Type ------------------------------------------------------ */
  --font-display: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fw-regular:   400;
  --fw-medium:    500;   /* every heading in the reference */
  --fw-semibold:  600;
  --fw-bold:      700;

  --text-eyebrow: 13px;
  --text-xs:      14px;
  --text-sm:      15px;
  --text-base:    16px;
  --text-lg:      18px;
  --text-xl:      23.2px;
  --text-2xl:     31.2px;
  --text-3xl:     50px;
  --text-4xl:     60.8px;
  --text-5xl:     70px;
  --text-counter: 60px;

  --lh-body:      1.9;    /* 30.4 / 16 */
  --lh-tight:     1.2;    /* section + hero headings */
  --lh-heading:   1.4;    /* h3–h6 */
  --ls-eyebrow:   .1em;
  --ls-button:    .08em;

  --measure:      68ch;

  /* ---------- Layout ---------------------------------------------------- */
  --container:      1340px;
  --container-wide: 1434px;
  --container-pad:  13px;
  --gap:            20px;

  --section-pad:      110px;
  --section-pad-sm:   85px;
  --section-pad-md:   95px;
  --section-pad-lg:   130px;
  --banner-pad-top:   230px;
  --banner-pad-bottom:130px;

  /* ---------- Radii & lines --------------------------------------------- */
  --radius-pill:  40px;
  --radius-btn:   30px;
  --radius-input: 5px;
  --radius-card:  0;
  --hairline:     1px solid var(--color-border);

  /* ---------- Motion ----------------------------------------------------- */
  --ease:          cubic-bezier(.645, .045, .355, 1);
  --ease-out:      cubic-bezier(.22, 1, .36, 1);
  --dur-fast:      .25s;
  --dur-base:      .3s;
  --dur-slow:      .4s;

  /* ---------- Elevation --------------------------------------------------
     The reference uses no shadows anywhere. This token exists only for the
     one overlapping panel that needs separation from a photo behind it.     */
  --shadow-panel: 0 24px 60px rgba(5, 52, 31, .12);

  --z-header:   100;
  --z-drawer:   999;
  --z-scrim:    998;
  --z-totop:    90;
}