/* ==========================================================================
   LK Risk — Design Tokens
   Single source of truth for colour, type, spacing, radius, shadow & motion.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     Colour — Gold (primary accent). Use sparingly: it should feel valuable.
     500 is the brand colour. Light shades for tints/borders, dark shades
     for hover/active states and accessible gold text on light backgrounds.
     ------------------------------------------------------------------------ */
  --gold-50:  #FBF8F2;
  --gold-100: #F4ECDD;
  --gold-200: #E8D9BE;
  --gold-300: #DBC59D;
  --gold-400: #CFB585;
  --gold-500: #C3A572; /* Brand */
  --gold-600: #AB8C59;
  --gold-700: #8A7148; /* AA-compliant gold text on white */
  --gold-800: #6A5737;
  --gold-900: #4A3D27;

  /* ------------------------------------------------------------------------
     Colour — Navy (premium dark sections). Depth, never pure black.
     ------------------------------------------------------------------------ */
  --navy-50:  #F3F5F8;
  --navy-100: #E3E8EF;
  --navy-200: #C4CEDB;
  --navy-300: #97A6BA;
  --navy-400: #677B96;
  --navy-500: #445A78;
  --navy-600: #2E4262;
  --navy-700: #1F314C;
  --navy-800: #16243A;
  --navy-900: #101D2B; /* Official logo navy */
  --navy-950: #0A121F;

  /* ------------------------------------------------------------------------
     Colour — Neutrals
     ------------------------------------------------------------------------ */
  --white:     #FFFFFF;
  --ivory:     #F7F5F0; /* Warm light section background */
  --stone-200: #E6E2D9; /* Hairlines on light backgrounds */
  --stone-500: #6B6A66; /* Secondary text on light */
  --ink:       #14181F; /* Primary text on light */

  /* ------------------------------------------------------------------------
     Semantic colour roles
     ------------------------------------------------------------------------ */
  --color-bg:            var(--white);
  --color-bg-alt:        var(--ivory);
  --color-bg-dark:       var(--navy-900);
  --color-bg-darker:     var(--navy-950);
  --color-text:          var(--ink);
  --color-text-muted:    var(--stone-500);
  --color-text-inverse:  var(--white);
  --color-text-inverse-muted: var(--navy-200);
  --color-accent:        var(--gold-500);
  --color-accent-strong: var(--gold-700);
  --color-line:          var(--stone-200);
  --color-line-dark:     rgba(255, 255, 255, 0.12);
  --color-field-line:    var(--navy-300); /* form inputs: visible, still a hairline */
  --color-error:         #A33A2F;         /* muted brick — AA on white */

  /* ------------------------------------------------------------------------
     Typography
     Cormorant Garamond — display: authority, heritage, quiet luxury.
     Manrope — text & UI: clear, modern, precise.
     ------------------------------------------------------------------------ */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale (min @ 375px → max @ 1440px) */
  --text-xs:   0.75rem;                                   /* 12 */
  --text-sm:   0.875rem;                                  /* 14 */
  --text-base: 1rem;                                      /* 16 */
  --text-md:   clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);  /* 17–18 */
  --text-lg:   clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);/* 22–26 */
  --text-xl:   clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);  /* 30–44 */
  --text-2xl:  clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);    /* 36–56 */
  --text-3xl:  clamp(2.75rem, 1.9rem + 4vw, 5.5rem);      /* 44–88 */

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.7;

  --tracking-tight: -0.015em;
  --tracking-wide:  0.14em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ------------------------------------------------------------------------
     Spacing — 4px base, generous at the top end so sections breathe.
     ------------------------------------------------------------------------ */
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-11: 6rem;     /* 96 */
  --space-12: 8rem;     /* 128 */

  --section-space: clamp(5rem, 3rem + 7vw, 9rem);

  /* ------------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------------ */
  --container-max: 1240px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --nav-height: 88px;

  /* ------------------------------------------------------------------------
     Shape & depth — small radii read as precise and architectural.
     ------------------------------------------------------------------------ */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 6px;

  --shadow-sm: 0 1px 2px rgba(15, 26, 43, 0.06);
  --shadow:    0 12px 32px -12px rgba(15, 26, 43, 0.18);
  --shadow-lg: 0 32px 64px -24px rgba(15, 26, 43, 0.28);

  /* ------------------------------------------------------------------------
     Motion — slow, composed, never bouncy.
     ------------------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 200ms;
  --duration: 400ms;
  --duration-slow: 900ms;
}