/* ============================================
   AI Guide — Design Tokens
   ============================================ */

:root {
  /* ---- Colors ---- */
  --color-primary:       #265A84;
  --color-primary-dark:  #1B4163;
  --color-primary-light: #0088CB;
  --color-accent:        #00ADEF;
  --color-cta:           #D41317;
  --color-cta-hover:     #B8101A;
  --color-dark:          #1A2332;
  --color-text:          #2D3748;
  --color-text-muted:    #64748B;
  --color-text-on-dark:  #FFFFFF;
  --color-text-on-dark-muted: #B0C4D8;
  --color-bg:            #FFFFFF;
  --color-bg-alt:        #F7F9FC;
  --color-border:        #E2E8F0;
  --color-white:         #FFFFFF;

  /* ---- Typography ---- */
  --font-family:         'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-size-base:      1rem;        /* 16px */
  --font-size-sm:        0.875rem;    /* 14px */
  --font-size-xs:        0.75rem;     /* 12px */
  --font-size-lg:        1.125rem;    /* 18px */
  --font-size-xl:        1.25rem;     /* 20px */
  --font-size-2xl:       1.5rem;      /* 24px */
  --font-size-3xl:       1.875rem;    /* 30px */
  --font-size-4xl:       2.25rem;     /* 36px */
  --font-size-5xl:       2.75rem;     /* 44px */
  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --line-height-tight:   1.2;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.7;

  /* ---- Spacing ---- */
  --space-xs:    0.25rem;   /* 4px  */
  --space-sm:    0.5rem;    /* 8px  */
  --space-md:    1rem;      /* 16px */
  --space-lg:    1.5rem;    /* 24px */
  --space-xl:    2rem;      /* 32px */
  --space-2xl:   3rem;      /* 48px */
  --space-3xl:   4rem;      /* 64px */
  --space-4xl:   5rem;      /* 80px */
  --section-pad: 5rem;      /* 80px vertical padding for sections */
  --container:   1200px;    /* max content width */

  /* ---- Shadows ---- */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 4px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg:    0 8px 40px rgba(0, 0, 0, 0.10);
  --shadow-header:0 2px 16px rgba(0, 0, 0, 0.08);

  /* ---- Radii ---- */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ---- Transitions ---- */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   500ms ease;

  /* ---- Z-index scale ---- */
  --z-header:    100;
  --z-overlay:   200;
  --z-modal:     300;
}