/* ============================================================
   SentinelPeak Insurance — tokens.css
   Base design tokens (Layer 1).
   Defaults inherited from the shared design system. Brand-specific
   overrides live in theme-insurance.css.
   Never use raw hex values in component CSS — always use var().
   ============================================================ */

:root {

  /* ── BRAND COLORS ─────────────────────────────────────── */
  --color-brand:        #0a7e8b;
  --color-brand-hover:  #096b76;
  --color-brand-light:  #cfe4e8;
  --color-brand-pale:   #e8f4f6;

  /* ── DARK / SECONDARY ─────────────────────────────────── */
  --color-dark:         #0a3954;
  --color-dark-light:   #1a5276;
  --color-dark-deep:    #07263a;

  /* ── SURFACES ─────────────────────────────────────────── */
  --color-surface:      #f9f8f5;
  --color-white:        #ffffff;

  /* ── BORDER ───────────────────────────────────────────── */
  --color-border:       #dde3e8;

  /* ── TEXT ─────────────────────────────────────────────── */
  --text-dark:          #131517;
  --text-mid:           #3c5060;
  --text-muted:         #6b7c8a;

  /* ── SEMANTIC STATES ──────────────────────────────────── */
  --color-success:      #1a8c5b;
  --color-success-bg:   #e6f7f0;
  --color-warning:      #b45309;
  --color-warning-bg:   #fef3c7;
  --color-error:        #c0392b;
  --color-error-hover:  #a52d22;
  --color-error-bg:     #fdf2f2;

  /* ── BORDER RADIUS ────────────────────────────────────── */
  --radius-sm:          6px;
  --radius-md:          10px;
  --radius-lg:          14px;
  --radius-xl:          20px;
  --radius-pill:        40px;

  /* ── SHADOWS ──────────────────────────────────────────── */
  --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.10);
  --shadow-md:          0 3px 10px rgba(0, 0, 0, 0.12);
  --shadow-lg:          0 6px 24px rgba(0, 0, 0, 0.15);

  /* ── TYPOGRAPHY ───────────────────────────────────────── */
  --font-family:         'Inter', sans-serif;
  --font-family-heading: 'Inter', sans-serif;
  --font-size-base:      16px;

  /* ── SPACING SCALE (8px grid) ─────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   16px;
  --space-4:   24px;
  --space-5:   32px;
  --space-6:   48px;
  --space-7:   64px;
  --space-8:   80px;
  --space-9:   96px;

  /* ── LAYOUT CONSTANTS ─────────────────────────────────── */
  --nav-height:         70px;
  --nav-padding-x:      80px;
  --content-max-width:  1200px;
  --section-padding-y:  60px;

  /* ── Z-INDEX SCALE ────────────────────────────────────── */
  --z-base:     1;
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-modal:    1000;
  --z-toast:    2000;

}