/* Allora Capital — Color tokens
   Primary: Noxen, Navaris, Nivelle  |  Secondary: Cymaris, Claria
   The palette is intentionally narrow and digital-optimized (RGB). */

:root {
  /* ---- Brand palette (base) ---- */
  --allora-noxen:   #0A2536; /* deep navy — authority, trust, security, stability */
  --allora-navaris: #33566D; /* steel blue — innovation, technology, professionalism */
  --allora-nivelle: #F3FAFF; /* near-white — clarity, neutrality, balance */
  --allora-cymaris: #5EA8A8; /* teal — the keyhole accent; signature secondary */
  --allora-claria:  #DAF6EF; /* pale mint — soft secondary support */

  --allora-white:   #FFFFFF;
  --allora-black:   #04141E; /* near-black, navy-biased */

  /* ---- Tints (mixed toward white) ---- */
  --noxen-80:   color-mix(in srgb, var(--allora-noxen) 80%, #fff);
  --noxen-60:   color-mix(in srgb, var(--allora-noxen) 60%, #fff);
  --noxen-40:   color-mix(in srgb, var(--allora-noxen) 40%, #fff);
  --noxen-20:   color-mix(in srgb, var(--allora-noxen) 20%, #fff);

  --navaris-80: color-mix(in srgb, var(--allora-navaris) 80%, #fff);
  --navaris-60: color-mix(in srgb, var(--allora-navaris) 60%, #fff);
  --navaris-40: color-mix(in srgb, var(--allora-navaris) 40%, #fff);
  --navaris-20: color-mix(in srgb, var(--allora-navaris) 20%, #fff);

  --cymaris-80: color-mix(in srgb, var(--allora-cymaris) 80%, #fff);
  --cymaris-60: color-mix(in srgb, var(--allora-cymaris) 60%, #fff);
  --cymaris-40: color-mix(in srgb, var(--allora-cymaris) 40%, #fff);
  --cymaris-20: color-mix(in srgb, var(--allora-cymaris) 20%, #fff);

  --claria-60:  color-mix(in srgb, var(--allora-claria) 60%, #fff);
  --claria-40:  color-mix(in srgb, var(--allora-claria) 40%, #fff);

  /* A darker teal for text/links on light surfaces (accessible contrast) */
  --cymaris-deep: color-mix(in srgb, var(--allora-cymaris) 78%, var(--allora-noxen));

  /* ---- Brand gradients ---- */
  --gradient-01: linear-gradient(135deg, var(--allora-noxen) 0%, var(--allora-navaris) 100%);
  --gradient-02: linear-gradient(135deg, var(--allora-navaris) 0%, var(--allora-cymaris) 100%);
  --gradient-03: linear-gradient(135deg, var(--allora-cymaris) 0%, var(--allora-claria) 100%);

  /* ---- Semantic — surfaces ---- */
  --surface-page:        var(--allora-nivelle);
  --surface-card:        var(--allora-white);
  --surface-muted:       color-mix(in srgb, var(--allora-nivelle) 55%, #fff);
  --surface-sunken:      color-mix(in srgb, var(--allora-navaris) 6%, var(--allora-nivelle));
  --surface-accent-soft: var(--allora-claria);
  --surface-inverse:     var(--allora-noxen);
  --surface-inverse-2:   var(--allora-navaris);

  /* ---- Semantic — text ---- */
  --text-strong:   var(--allora-noxen);
  --text-body:     var(--allora-navaris);
  --text-muted:    color-mix(in srgb, var(--allora-navaris) 62%, var(--allora-nivelle));
  --text-inverse:  var(--allora-nivelle);
  --text-on-accent: var(--allora-white);
  --link:          var(--cymaris-deep);
  --link-hover:    var(--allora-noxen);

  /* ---- Semantic — accent ---- */
  --accent:        var(--allora-cymaris);
  --accent-hover:  color-mix(in srgb, var(--allora-cymaris) 86%, var(--allora-noxen));
  --accent-press:  color-mix(in srgb, var(--allora-cymaris) 72%, var(--allora-noxen));
  --accent-soft:   var(--allora-claria);

  /* ---- Semantic — borders / dividers ---- */
  --border:         color-mix(in srgb, var(--allora-navaris) 16%, #fff);
  --border-strong:  color-mix(in srgb, var(--allora-navaris) 30%, #fff);
  --border-accent:  color-mix(in srgb, var(--allora-cymaris) 55%, #fff);
  --border-inverse: color-mix(in srgb, var(--allora-nivelle) 16%, transparent);

  /* ---- Status (harmonized to the brand temperature) ---- */
  --success:      #2E8C6A;
  --success-soft: #E2F4ED;
  --warning:      #C5883B;
  --warning-soft: #F8EEDD;
  --danger:       #BF514B;
  --danger-soft:  #F7E3E1;
  --info:         var(--cymaris-deep);
  --info-soft:    var(--allora-claria);

  /* ---- Focus ring ---- */
  --focus-ring: color-mix(in srgb, var(--allora-cymaris) 55%, transparent);
}
/* Allora Capital — Typography tokens
   Primary (display / UI): Giga Sans (licensed, supplied)
   Secondary (numeric / caption / data): Senta Sans → IBM Plex Sans substitute */

:root {
  /* ---- Families ---- */
  --font-display: 'Giga Sans', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Giga Sans', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-numeric: 'IBM Plex Sans', 'Senta Sans', ui-monospace, 'Segoe UI', sans-serif;

  /* ---- Weights ---- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* ---- Type scale (fluid-ready, px base) ---- */
  --text-display:  clamp(48px, 6vw, 76px);  /* hero statements */
  --text-h1:       clamp(38px, 4.4vw, 56px);
  --text-h2:       clamp(30px, 3.2vw, 40px);
  --text-h3:       28px;
  --text-h4:       22px;
  --text-h5:       18px;
  --text-overline: 13px;  /* uppercase eyebrow / kicker */
  --text-body-lg:  19px;
  --text-body:     16px;
  --text-body-sm:  14px;
  --text-caption:  13px;
  --text-micro:    11px;

  /* ---- Line heights ---- */
  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-heading: 1.25;
  --leading-body:    1.6;
  --leading-relaxed: 1.75;

  /* ---- Letter spacing ---- */
  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-overline: 0.16em; /* uppercase eyebrows */
}
/* Allora Capital — Spacing & layout tokens. 4px base unit. */

:root {
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Section rhythm */
  --section-pad-y: clamp(64px, 9vw, 128px);
  --gutter:        clamp(20px, 5vw, 80px); /* @kind spacing */

  /* Container widths */
  --container-sm:  720px;
  --container-md:  960px;
  --container-lg:  1200px;
  --container-xl:  1320px;
}
/* Allora Capital — Radii, shadows, borders, motion.
   The brand reads premium and calm: soft geometric corners, cool
   navy-tinted shadows (never neutral gray), restrained motion. */

:root {
  /* ---- Corner radii ---- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  28px;
  --radius-2xl: 40px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-hairline: 1px solid var(--border);

  /* ---- Shadows (navy-tinted, soft, layered) ---- */
  --shadow-xs: 0 1px 2px rgba(10, 37, 54, 0.06);
  --shadow-sm: 0 2px 6px rgba(10, 37, 54, 0.07), 0 1px 2px rgba(10, 37, 54, 0.05);
  --shadow-md: 0 8px 24px rgba(10, 37, 54, 0.10), 0 2px 6px rgba(10, 37, 54, 0.06);
  --shadow-lg: 0 18px 48px rgba(10, 37, 54, 0.14), 0 4px 12px rgba(10, 37, 54, 0.07);
  --shadow-xl: 0 32px 80px rgba(10, 37, 54, 0.20), 0 8px 24px rgba(10, 37, 54, 0.10);
  /* Accent glow for emphasis on dark surfaces */
  --shadow-accent: 0 12px 32px rgba(94, 168, 168, 0.30);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   400ms; /* @kind other */

  /* ---- Z-index scale ---- */
  --z-base:   1;     /* @kind other */
  --z-sticky: 100;   /* @kind other */
  --z-overlay: 1000; /* @kind other */
  --z-modal:  1100;  /* @kind other */
  --z-toast:  1200;  /* @kind other */
}