/* ==========================================================================
   CapabriX — BRAND TOKENS
   --------------------------------------------------------------------------
   >>> THIS IS THE ONLY FILE YOU EDIT TO CHANGE BRAND COLOURS. <<<

   The three --brand-* values at the top are the raw logo colours, read off
   CapabriX_logo.png by inspection. If you sample the PNG and get slightly
   different hex values, change those three lines and nothing else — every
   other token below is derived from them by hand and will still read correctly.

   ACCESSIBILITY — measured contrast against #FFFFFF (WCAG 2.1):
     --brand-navy   #173763   11.91:1   passes AA + AAA for body text
     --brand-teal   #12A3B0    3.05:1   FAILS AA body  -> DECORATIVE USE ONLY
     --brand-green  #3FBE72    2.38:1   FAILS AA body + large -> DECORATIVE ONLY

   That is why there are two sets:
     * --brand-*  : true logo colours. Gradients, icon fills, rules, glyphs.
                    Never put text in these on a light background.
     * --accent-* : darkened variants that DO pass AA. Use for any text, link
                    or button surface that carries white text.
   ========================================================================== */

:root {
  /* ---- raw logo colours (swap these three if you sample exact values) ---- */
  --brand-navy:  #173763;   /* wordmark "Capabri"        */
  --brand-teal:  #12A3B0;   /* "X" figure, teal end      */
  --brand-green: #3FBE72;   /* "X" figure, green end     */

  /* ---- navy ramp ---- */
  --navy-900: #0E1F3D;   /* 16.38:1 — page headings, footer ground */
  --navy-800: #132B50;   /* 14.10:1 — headings                     */
  --navy-700: #173763;   /* 11.91:1 — primary brand / buttons      */
  --navy-600: #1E4577;   /*  9.66:1 — primary hover                */
  --navy-100: #E7EDF5;   /* tint: rules, chips                     */
  --navy-050: #F2F6FB;   /* tint: section grounds                  */

  /* ---- accent ramp (text-safe) ---- */
  --accent-teal:      #0A6F7C;   /* 5.87:1 — teal that can carry text  */
  --accent-teal-dark: #075A65;   /* hover                              */
  --accent-green:     #1F7A4D;   /* 5.32:1 — green that can carry text */
  --accent-green-dark:#186340;   /* hover                              */

  /* ---- neutral / text ---- */
  --ink-900: #0E1F3D;
  --ink-700: #29354A;
  --ink-600: #3E4C63;   /* 8.68:1 — body copy                    */
  --ink-500: #5A6879;   /* 5.69:1 — muted copy, still AA          */
  --ink-300: #94A1B2;   /* decorative only, never body text       */
  --line:    #E4E9F0;   /* hairlines                              */
  --line-strong: #D2DAE5;

  /* ---- surfaces (white-first, as requested) ---- */
  --bg:         #FFFFFF;
  --surface:    #FFFFFF;
  --surface-2:  #F7FAFC;   /* barely-there section band */
  --surface-3:  #F2F6FB;   /* card ground on white      */
  --surface-ink:#0E1F3D;   /* inverted sections, footer */

  /* ---- gradients -------------------------------------------------------
     grad-brand : true to the logo. Fills, icon shapes, decorative rules.
     grad-text  : darkened ends so gradient TEXT still meets AA large.
     ---------------------------------------------------------------------- */
  --grad-brand: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-green) 100%);
  --grad-brand-deep: linear-gradient(135deg, #0F8792 0%, #2FA862 100%);
  --grad-text:  linear-gradient(100deg, var(--accent-teal) 0%, var(--accent-green) 100%);
  --grad-navy:  linear-gradient(160deg, #143059 0%, #0C1D38 100%);

  /* ---- footer / inverted text (measured on --navy-900) ---- */
  --on-dark:        #FFFFFF;   /* 16.38:1 */
  --on-dark-muted:  #A8B6CC;   /*  7.98:1 */
  --on-dark-accent: #7FD6D8;   /*  9.76:1 */

  /* ---- feedback ---- */
  --ok-bg:#EAF7F0; --ok-fg:#186340; --ok-line:#B6E3CB;
  --warn-bg:#FFF6E6; --warn-fg:#8A5A00; --warn-line:#F2D9A6;
  --err-bg:#FDECEC; --err-fg:#A32020; --err-line:#F3C4C4;
  --info-bg:#EAF4F7; --info-fg:#075A65; --info-line:#B9DCE3;

  /* ---- focus ring: must be visible on white AND on navy ---- */
  --focus:       #0A6F7C;
  --focus-dark:  #7FD6D8;
  --focus-width: 3px;

  /* ---- type ---- */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", "Plus Jakarta Sans", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* fluid type scale */
  --fs-display: clamp(2.1rem, 1.4rem + 2.3vw, 3.35rem);
  --fs-h1:      clamp(2rem, 1.35rem + 2.2vw, 3rem);
  --fs-h2:      clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  --fs-h3:      clamp(1.2rem, 1.05rem + 0.55vw, 1.45rem);
  --fs-lead:    clamp(1.03rem, 0.97rem + 0.35vw, 1.2rem);
  --fs-body:    1rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.8rem;

  /* ---- space / shape ---- */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;   --sp-7:3rem;   --sp-8:4rem;  --sp-9:6rem;
  --wrap: 1180px;
  --wrap-narrow: 760px;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;

  /* ---- elevation: soft and navy-tinted, not grey ---- */
  --sh-1: 0 1px 2px rgba(14,31,61,.05), 0 2px 8px rgba(14,31,61,.05);
  --sh-2: 0 2px 6px rgba(14,31,61,.06), 0 10px 26px rgba(14,31,61,.07);
  --sh-3: 0 6px 14px rgba(14,31,61,.08), 0 22px 48px rgba(14,31,61,.10);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}