/* ==========================================================================
   Liquidex Sourcebook — Design tokens
   Every value below is taken verbatim from the approved design.
   ========================================================================== */

:root {
  /* --- Brand / ink ------------------------------------------------------ */
  --color-ink:            #14171a; /* primary text, dark buttons */
  --color-ink-2:          #1c2126; /* dark panels, dark pricing card */
  --color-navy:           #1d2733; /* primary accent, links, CTAs */
  --color-navy-dark:      #0f1620; /* accent hover */

  /* --- Surfaces --------------------------------------------------------- */
  --color-bg:             #f3f4f6; /* page background */
  --color-bg-alt:         #e9ebee; /* alternating band + footer */
  --color-surface:        #fafbfc; /* cards, form panel */
  --color-surface-2:      #f8f9fa; /* subtle notice panel */
  --color-panel:          #eef0f3; /* disclaimer panel */
  --color-white:          #ffffff;

  /* --- Hairlines / borders --------------------------------------------- */
  --color-line:           #dfe3e8;
  --color-line-soft:      #dbdfe5;
  --color-line-mid:       #d5dae1;
  --color-line-card:      #e2e5e9;
  --color-line-card-2:    #dde1e6;
  --color-line-faint:     #e7e9ec;
  --color-line-faint-2:   #e4e7ea;
  --color-line-input:     #d0d6de;
  --color-line-strong:    #c7cfd8;

  /* --- Secondary text --------------------------------------------------- */
  --color-text-2:         #3a4047;
  --color-text-3:         #41474f;
  --color-text-4:         #464d55;
  --color-text-5:         #4d545d;
  --color-muted:          #636b77;
  --color-muted-2:        #767f8b;
  --color-muted-3:        #7e8794;
  --color-muted-4:        #949dab;

  /* --- On dark ---------------------------------------------------------- */
  --color-on-dark:        #e7e9ec;
  --color-on-dark-2:      #a9b2bd;
  --color-on-dark-3:      #9aa8b8;
  --color-on-dark-4:      #6f7c8c;
  --color-on-dark-line:   #353b42;
  --color-on-dark-fill:   #232930;
  --color-on-dark-fill-2: #1a1f24;

  /* --- Amber (labels, numerals, "Most Popular") ------------------------ */
  --color-amber:          #9a5b12;
  --color-amber-light:    #b98a4a;
  --color-amber-deep:     #a3561b; /* required-field asterisk */
  --color-error:          #a3372f; /* form error text */

  /* --- Type ------------------------------------------------------------- */
  --font-sans: Archivo, 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* --- Radii ------------------------------------------------------------ */
  --radius-sm:  9px;
  --radius:     12px;
  --radius-md:  14px;
  --radius-lg:  16px;
  --radius-xl:  18px;
  --radius-pill: 999px;

  /* --- Shadows ---------------------------------------------------------- */
  --shadow-price-card: 0 34px 66px -34px rgba(30, 35, 25, .55);
  --shadow-price-card-compact: 0 30px 60px -34px rgba(30, 35, 25, .5);

  /* --- Container widths ------------------------------------------------- */
  --w-1200: 1200px;
  --w-1160: 1160px;
  --w-1100: 1100px;
  --w-1000: 1000px;
  --w-900:  900px;
  --w-820:  820px;
  --w-720:  720px;

  /* --- Focus ring ------------------------------------------------------- */
  --focus-ring: 2px solid rgba(47, 66, 55, .25);
  --focus-ring-strong: 2px solid rgba(47, 66, 55, .4);
}