/* ============================================================
   PURE POWER CONTRACTORS — Design Tokens
   css/variables.css

   Single source of truth for colors, typography, spacing, and
   all shared design values. Referenced by layout.css,
   components.css, and page-specific CSS.

   Breakpoints (for reference — used in media queries elsewhere):
     Tablet:  768px   (min-width: 48rem)
     Desktop: 1024px  (min-width: 64rem)
     Wide:    1440px  (min-width: 90rem)
   ============================================================ */


/* ------------------------------------------------------------
   @font-face — Self-hosted fonts
   Poppins: headings, nav, buttons
   Open Sans: body text, paragraphs
   Font files go in /fonts/ (woff2 + woff for broad support)
   ------------------------------------------------------------ */

/* Poppins — Regular (400) */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-400.woff2') format('woff2'),
       url('../fonts/poppins-400.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Poppins — Medium (500) */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-500.woff2') format('woff2'),
       url('../fonts/poppins-500.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Poppins — Semibold (600) */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/poppins-600.woff2') format('woff2'),
       url('../fonts/poppins-600.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Open Sans — Regular (400) */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans-400.woff2') format('woff2'),
       url('../fonts/open-sans-400.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Open Sans — Semibold (600) */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans-600.woff2') format('woff2'),
       url('../fonts/open-sans-600.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


:root {

  /* ==========================================================
     1. COLOR PALETTE — Raw values
     Semantic tokens below reference these. Avoid using
     --palette-* directly in component CSS.
     ========================================================== */

  --palette-navy:        #32608f;
  --palette-navy-light:  #3a6fa3;
  --palette-royal:       #3f74ff;
  --palette-royal-dark:  #2d5fd9;
  --palette-coral:       #ff8e64;

  --palette-black:       #111111;
  --palette-charcoal:    #1a1a1a;
  --palette-dark-blue:   #1f2532;
  --palette-slate:       #343e52;
  --palette-grey:        #626a7e;
  --palette-grey-light:  #8e929c;

  --palette-silver:      #e2e2e2;
  --palette-lavender:    #e2e8f8;
  --palette-ice:         #ecf1ff;
  --palette-ghost:       #f0f4ff;
  --palette-frost:       #f3f5fd;
  --palette-snow:        #fafbff;
  --palette-white:       #ffffff;

  --palette-hover-blue:  #a6baee;
  --palette-success:     #34cf2c;
  --palette-error:       #ef3b31;


  /* ==========================================================
     2. SEMANTIC COLORS — Use these in component CSS
     ========================================================== */

  /* --- Text ------------------------------------------------ */
  --color-text-primary:        var(--palette-dark-blue);   /* 10.8:1 on white */
  --color-text-heading:        var(--palette-black);       /* 17.1:1 on white */
  --color-text-secondary:      var(--palette-grey);        /*  5.0:1 on white — AA body */
  --color-text-muted:          var(--palette-grey-light);  /*  3.5:1 on white — large text only */
  --color-text-on-dark:        var(--palette-white);       /*  4.6:1 on navy */
  --color-text-on-dark-muted:  var(--palette-hover-blue);  /*  2.8:1 on navy — large text only */
  --color-text-link:           var(--palette-royal);       /*  4.6:1 on white */
  --color-text-link-hover:     var(--palette-royal-dark);

  /* --- Surfaces / Backgrounds ------------------------------ */
  --color-surface-dark:    var(--palette-navy);
  --color-surface-darker:  var(--palette-charcoal);
  --color-surface-white:   var(--palette-white);
  --color-surface-light:   var(--palette-frost);
  --color-surface-ghost:   var(--palette-ghost);
  --color-surface-snow:    var(--palette-snow);

  /* --- Brand / Accent -------------------------------------- */
  --color-brand-primary:       var(--palette-navy);
  --color-brand-accent:        var(--palette-royal);
  --color-brand-accent-hover:  var(--palette-royal-dark);
  --color-brand-warm:          var(--palette-coral);

  /* --- Borders --------------------------------------------- */
  --color-border-default:  var(--palette-lavender);
  --color-border-light:    var(--palette-ice);
  --color-border-strong:   var(--palette-silver);
  --color-border-dark:     rgba(255, 255, 255, 0.15);

  /* --- States ---------------------------------------------- */
  --color-success:     var(--palette-success);
  --color-error:       var(--palette-error);
  --color-focus-ring:  var(--palette-royal);

  /* --- Overlays & Shadows ---------------------------------- */
  --color-overlay-dark:   rgba(0, 0, 0, 0.3);
  --color-overlay-brand:  rgba(50, 96, 143, 0.78);
  --color-glow:           rgba(63, 116, 255, 0.4);
  --color-shadow:         rgba(63, 116, 255, 0.09);


  /* ==========================================================
     3. TYPOGRAPHY
     ========================================================== */

  /* --- Font Families --------------------------------------- */
  --font-heading:  'Poppins', sans-serif;
  --font-body:     'Open Sans', sans-serif;

  /* --- Font Sizes ------------------------------------------
     Fixed rem for body text, fluid clamp() for headings.
     clamp() ranges tuned for 375px → 1440px viewports.       */
  --text-xs:   0.75rem;                                    /* 12px */
  --text-sm:   0.8125rem;                                  /* 13px */
  --text-base: 0.9375rem;                                  /* 15px */
  --text-md:   1rem;                                       /* 16px */
  --text-lg:   1.125rem;                                   /* 18px */
  --text-xl:   1.3125rem;                                  /* 21px */
  --text-2xl:  clamp(1.25rem, 1rem + 0.5vw, 1.5rem);      /* 20 → 24px */
  --text-3xl:  clamp(1.5rem, 1.25rem + 0.75vw, 2rem);     /* 24 → 32px */
  --text-4xl:  clamp(1.75rem, 1.25rem + 1.25vw, 2.375rem); /* 28 → 38px */
  --text-5xl:  clamp(2rem, 1.5rem + 1.5vw, 2.625rem);     /* 32 → 42px */
  --text-6xl:  clamp(2.25rem, 1.5rem + 2vw, 3rem);        /* 36 → 48px */

  /* --- Font Weights ---------------------------------------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* --- Line Heights ---------------------------------------- */
  --leading-tight:    1.2;    /* Hero headlines, large display */
  --leading-snug:     1.35;   /* Headings (h2–h4) */
  --leading-normal:   1.6;    /* Body text default */
  --leading-relaxed:  1.75;   /* Long-form, blockquotes */

  /* --- Letter Spacing -------------------------------------- */
  --tracking-tight:   -0.01em;  /* Large headlines */
  --tracking-normal:   0;       /* Default */
  --tracking-wide:     0.05em;  /* Uppercase labels, nav items */
  --tracking-wider:    0.1em;   /* Section labels, eyebrow text */


  /* ==========================================================
     4. SPACING — 4px base grid
     ========================================================== */

  --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 */
  --space-20:  5rem;      /*  80px */
  --space-30:  7.5rem;    /* 120px */


  /* ==========================================================
     5. BORDERS
     ========================================================== */

  /* --- Widths ---------------------------------------------- */
  --border-width-thin:    1px;
  --border-width-medium:  2px;
  --border-width-thick:   3px;

  /* --- Radii ----------------------------------------------- */
  --radius-none:    0;
  --radius-sm:      0.25rem;   /* 4px  — buttons, inputs */
  --radius-md:      0.375rem;  /* 6px  — cards, dropdowns */
  --radius-lg:      0.875rem;  /* 14px — featured cards, CTAs */
  --radius-pill:    100px;     /* pill buttons, tags */
  --radius-circle:  50%;       /* avatars, icon circles */


  /* ==========================================================
     6. SHADOWS
     ========================================================== */

  --shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md:       0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:       7px 7px 10px var(--color-shadow);
  --shadow-glow:     3px 3px 12px var(--color-glow);
  --shadow-glow-sm:  1px 1px 8px 0 var(--color-brand-primary);
  --shadow-focus:    0 0 0 3px var(--color-glow);


  /* ==========================================================
     7. TRANSITIONS
     ========================================================== */

  --transition-fast:  0.2s ease-in-out;
  --transition-base:  0.3s ease-in-out;
  --transition-slow:  0.4s ease-in-out;


  /* ==========================================================
     8. LAYOUT
     ========================================================== */

  --container-max:      75rem;     /* 1200px */
  --container-narrow:   67.5rem;   /* 1080px */
  --container-tight:    40rem;     /*  640px */
  --container-padding:  var(--space-5);  /* 20px horizontal gutter */


  /* ==========================================================
     9. Z-INDEX
     ========================================================== */

  --z-below:     -1;
  --z-base:       0;
  --z-raised:     1;
  --z-dropdown:  10;
  --z-sticky:    20;
  --z-overlay:   30;
  --z-modal:     40;
  --z-toast:     50;
}