/* ==========================================================================
   DESIGN TOKENS
   Single source of truth for all brand values. Import/link before every
   other stylesheet on every page.
   ========================================================================== */

:root {

  /* ---------- Typography ---------- */
  --p4p-font-head: 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
  --p4p-font-body: 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;


  /* ---------- Color Palette ---------- */
  /*
   * Two base colors from logo:  Violet #7716CD  |  Teal #399FB9
   * Shades derived by mixing with black (dark end) or white (light end):
   *   --*-dark   = 50% base + 50% black
   *   --*-deep   = 75% base + 25% black
   *   base       = 100%
   *   --*-medium = 75% base + 25% white
   *   --*-mild   = 50% base + 50% white
   *   --*-light  = 25% base + 75% white
   *   --*-ultra  = 10% base + 90% white
   */

  /* Violet family (base: #7716CD) */
  --royal-violet-dark:   #3C0B67;
  --royal-violet-deep:   #59119A;
  --royal-violet:        #7716CD;
  --royal-violet-medium: #9950DA;
  --royal-violet-mild:   #BB8BE6;
  --royal-violet-light:  #DDC5F3;
  --royal-violet-ultra:  #F2E8FB;

  /* Teal family (base: #399FB9) */
  --pacific-blue-dark:   #1C505D;
  --pacific-blue-deep:   #2B778B;
  --pacific-blue:        #399FB9;
  --pacific-blue-medium: #6AB7CA;
  --pacific-blue-mild:   #9CCFDC;
  --pacific-blue-light:  #CCE7EF;
  --pacific-blue-ultra:  #EBF6F9;

  /* Neutrals */
  --grey:  #808080;
  --white: #FFFFFF;
  --black: #000000;

  /* Semantic aliases */
  --p4p-primary:    var(--royal-violet);
  --p4p-text-dark:  #212529;
  --p4p-panel-bg:   #ffffff; /* the panel / card background color */

  /* Section context variable — set by .bg1 / .bg2 on a section,
     consumed by child components (option cards, etc.) */
  --section-bg: transparent;


  /* ---------- Spacing Scale ---------- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */


  /* ---------- Border Radius ---------- */
  --radius-card:  12px;
  --radius-panel: 16px;
  --radius-hero:  0.5rem;


  /* ---------- Borders ---------- */
  /* Two tiers: panels (outer containers) use stronger border;
     option cards (inner) use softer border */
  --border-panel: 1px solid rgba(0, 0, 0, 0.35);
  --border-card:  1px solid rgba(0, 0, 0, 0.15);

}