/* =========================================================================
   Design tokens
   Reference style: Calendly.com - "Navy ink on cool marble"
   (styles.refero.design/style/9946887b-ffa9-4276-af81-ae6352795afb)
   Structure, type scale, spacing, radii and shadows are taken verbatim.
   Only the accent block below is brand-specific.
   ========================================================================= */

/* ---- Web font, served from this document root ---------------------------
   Manrope is loaded from assets/fonts/ and from nowhere else. Nothing on the
   page requests any host but this one, and nothing may be added that does: a
   stylesheet fetched from another host hands a visitor's IP address to that
   host on every page view, and the privacy notice states that none is handed
   to anyone.

   One file per subset rather than one per weight. Google serves Manrope as a
   variable font, so 400, 500, 600 and 700 all render out of a single
   download, and the declared range is the weight axis the file actually
   carries, 200 to 800.

   Two subsets, cut from the same subsets the Google stylesheet served, so
   the glyph coverage is unchanged: latin, and latin-ext, which is what
   renders a Turkish name typed into the contact form. The unicode-range
   values are copied verbatim from that stylesheet.

   font-display: swap is what the Google stylesheet asked for, so first paint
   behaves exactly as it did before.

   Manrope is under the SIL Open Font License 1.1, and the license text ships
   beside the font at assets/fonts/OFL-Manrope.txt.                         */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Palette (reference, unchanged) ---------------------------------- */
  --ink-navy:    #0b3558;  /* all text, headings, dark buttons, nav        */
  --slate-gray:  #476788;  /* secondary body copy, helper text             */
  --mist-gray:   #a6bbd1;  /* disabled text, inactive labels               */
  --hairline:    #d4e0ed;  /* borders, dividers                            */
  --pebble:      #f0f3f8;  /* badge backgrounds, input fills               */
  --cloud:       #f8f9fb;  /* canvas, footer background                    */
  --paper:       #ffffff;  /* card surfaces, elevated panels               */
  --carbon:      #0a0a0a;  /* logo glyphs only - never used as text colour */

  /* ---- Type ------------------------------------------------------------ */
  --font-sans: "Manrope", "Gilroy", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Minor third (1.2) from a 16px base */
  --text-display:      80px;  --lh-display:      1.2;
  --text-heading-lg:   68px;  --lh-heading-lg:   1.2;
  --text-heading:      50px;  --lh-heading:      1.2;
  --text-heading-sm:   38px;  --lh-heading-sm:   1.21;
  --text-subheading:   28px;  --lh-subheading:   1.4;
  --text-body-lg:      20px;  --lh-body-lg:      1.4;
  --text-button:       18px;  --lh-button:       1.6;
  --text-body:         16px;  --lh-body:         1.6;
  --text-body-sm:      14px;  --lh-body-sm:      1.4;
  --text-caption:      12px;  --lh-caption:      1.5;

  /* ---- Spacing (8px base) ---------------------------------------------- */
  --sp-8:8px;   --sp-16:16px; --sp-24:24px; --sp-32:32px; --sp-40:40px;
  --sp-48:48px; --sp-56:56px; --sp-64:64px; --sp-72:72px; --sp-96:96px;

  --max-width:   1200px;
  --nav-height:  64px;
  --section-gap: 64px;
  --card-padding: 24px;

  /* ---- Radius ----------------------------------------------------------- */
  --r-card:    24px;
  --r-product: 16px;
  --r-button:   8px;
  --r-input:    8px;
  --r-small:    4px;
  --r-pill:  9999px;

  /* ---- Shadows: three-layer, blue-tinted (never neutral black) ---------- */
  --shadow-sm:
    rgba(71,103,136,.04) 0 4px  5px,
    rgba(71,103,136,.03) 0 4px 10px,
    rgba(71,103,136,.05) 0 10px 20px;
  --shadow-md:
    rgba(71,103,136,.04) 0 4px  5px,
    rgba(71,103,136,.03) 0 8px 15px,
    rgba(71,103,136,.08) 0 30px 50px;
  --shadow-lg:
    rgba(71,103,136,.04) 0 4px  5px,
    rgba(71,103,136,.03) 0 8px 15px,
    rgba(71,103,136,.06) 0 15px 30px;

  --ring: 0 0 0 3px rgba(11,53,88,.18);
}

/* ---- Brand accent: Saga ------------------------------------------------ */
/* The product's bright green (#22c55e) gives only 2.3:1 against white, so it
   is reserved for decoration. Filled surfaces use #15803d (5.0:1 on white). */
:root {
  --accent:        #15803d;  /* primary CTA fill, active states, links      */
  --accent-strong: #166534;  /* hover / pressed                             */
  --accent-ink:    #14532d;  /* accent text on --accent-soft (9.4:1)        */
  --accent-soft:   #e8f6ed;  /* badge + soft fills                          */
  --accent-line:   #c2e5cf;  /* accent-tinted hairline                      */
  --accent-bright: #22c55e;  /* charts, progress fills, decorative accents  */
  --blob-a:        #0099ff;  /* decorative only - never a functional fill   */
  --blob-b:        #22c55e;
  --focus-ring:    0 0 0 3px rgba(21,128,61,.28);
}