/* ==============================================
   TOKENS — design variables only, no rules
   ============================================== */
:root {
  /* Brand colors */
  --color-blue:         #007698;
  --color-blue-dark:    #006080;
  --color-blue-darker:  #004357;
  --color-green:        #ABC230;
  --color-green-dark:   #96aa28;
  --color-gray-web:     #62564B;
  --color-white:        #FFFFFF;
  --color-light-gray:   #F5F5F5;
  --color-border:       #E2E4E8;
  --color-error:        #A8281A;

  /* Missing vars that were causing silent CSS failures */
  --color-gray:         #D8D8D8;
  --color-gray-light:   #EFEFEF;
  --color-text:         #2C2C2A;

  /* Semantic white-alpha (replaces repeated rgba literals) */
  --white-10:  rgba(255,255,255,0.10);
  --white-15:  rgba(255,255,255,0.15);
  --white-60:  rgba(255,255,255,0.60);
  --white-70:  rgba(255,255,255,0.70);
  --white-80:  rgba(255,255,255,0.80);
  --white-85:  rgba(255,255,255,0.85);
  --white-88:  rgba(255,255,255,0.88);

  /* Typography */
  --font-heading: 'Arial Rounded MT Bold', 'Arial Rounded', Arial, sans-serif;
  --font-body:    'Roboto', Arial, sans-serif;

  /* Type scale */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-md:   17px;
  --text-lg:   1.1rem;
  --text-xl:   1.5rem;
  --text-2xl:  2.25rem;
  --text-3xl:  2.75rem;

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.2;
  --lh-base:   1.6;
  --lh-body:   1.65;
  --lh-loose:  1.8;

  /* Spacing scale (8px base) */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-7:  96px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-full: 50%;

  /* Layout */
  --max-width:         1280px;
  --max-width-content: 800px;
}