/**
 * GP Agency Framework — Brand Pack Template
 * This file overrides ANY design token for a specific client.
 * Copy this file and rename it to: client-[name].css
 */

:root {

  /* ------------------------------------------------------ */
  /* BRAND COLOURS                                           */
  /* ------------------------------------------------------ */

  /* Primary brand colours */
  --brand-primary: #0A84FF;
  --brand-primary-light: #4DA3FF;
  --brand-primary-dark: #005FCC;

  /* Secondary brand colours */
  --brand-secondary: #0F172A;
  --brand-secondary-light: #1E293B;
  --brand-secondary-dark: #0A0F1F;

  /* Accent colours */
  --brand-accent: #FFB800;
  --brand-accent-light: #FFD766;
  --brand-accent-dark: #CC8F00;

  /* Status colours */
  --brand-success: #16A34A;
  --brand-warning: #F59E0B;
  --brand-error: #DC2626;

  /* Borders */
  --brand-border: var(--grey-200);


  /* ------------------------------------------------------ */
  /* TYPOGRAPHY                                              */
  /* ------------------------------------------------------ */

  /* Font families */
  --font-body: "Inter", sans-serif;
  --font-heading: "Inter", sans-serif;
  --font-accent: "Inter", sans-serif;

  /* Font sizes */
  --font-size-base: 16px;
  --font-size-h1: 48px;
  --font-size-h2: 36px;
  --font-size-h3: 28px;
  --font-size-h4: 22px;

  /* Line heights */
  --line-height-body: 1.6;
  --line-height-heading: 1.2;


  /* ------------------------------------------------------ */
  /* COMPONENT STYLING                                       */
  /* ------------------------------------------------------ */

  /* Buttons */
  --button-radius: var(--radius-pill);
  --button-padding-y: var(--space-12);
  --button-padding-x: var(--space-20);
  --button-shadow: var(--shadow-soft);

  /* Cards */
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-soft);
  --card-background: #ffffff;

  /* Panels */
  --panel-background: var(--section-muted);
  --panel-radius: var(--radius-md);

  /* Metrics */
  --metric-color: var(--brand-primary);

  /* CTAs */
  --cta-background: var(--brand-primary);
  --cta-text-color: #ffffff;


  /* ------------------------------------------------------ */
  /* SECTION BACKGROUNDS                                     */
  /* ------------------------------------------------------ */

  --section-light: #ffffff;
  --section-muted: var(--grey-50);
  --section-dark: var(--brand-secondary);

  /* Optional gradient backgrounds */
  --section-gradient: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));

  /* Hero overlays */
  --hero-overlay-color: rgba(0, 0, 0, 0.4);
  --hero-overlay-blend: multiply;


  /* ------------------------------------------------------ */
  /* LAYOUT TOKENS                                           */
  /* ------------------------------------------------------ */

  --content-width: 1200px;
  --content-width-wide: 1400px;

  --section-padding-y: var(--space-64);
  --grid-gap: var(--space-32);


  /* ------------------------------------------------------ */
  /* SPACING OVERRIDES                                       */
  /* ------------------------------------------------------ */

  /* Optional: override spacing scale per brand */
  /* --space-16: 20px; */
  /* --space-24: 28px; */
  /* --space-32: 40px; */


  /* ------------------------------------------------------ */
  /* MICRO-BRANDING                                          */
  /* ------------------------------------------------------ */

  --border-width: 2px;
  --link-underline-offset: 4px;
  --hover-lift: translateY(-4px);

}