/* ============================================================
   Amplifi Brand Tokens
   Source of truth for all Amplifi-branded properties.
   https://brand.amplifi-impact.com

   Usage:
     <link rel="stylesheet" href="https://brand.amplifi-impact.com/css/amplifi-brand.css">

   Then reference tokens as var(--amplifi-*) in your project CSS.
   ============================================================ */

/* --- Fonts ------------------------------------------------- */
/* Sans-serif: Space Grotesk (light 300, regular 400, medium 500, semibold 600, bold 700) */
/* Serif:      Thermal VF is the canonical brand serif (brand book).
               Playfair Display is the web fallback (Thermal is not on Google Fonts).
               Use Playfair Display for all web properties unless self-hosting Thermal. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');


/* --- Design Tokens ----------------------------------------- */
:root {

  /* ── Colour Palette ──────────────────────────────────────
     Named after the brand journey:
     Canvas → Signal → Edge → Boardroom → Spark
     "Amplifi starts with a blank Canvas, finds the Signal
      through the noise, sharpens the Edge, brings it to the
      Boardroom, and creates a Spark of commercial impact." */

  /* Primary accent */
  --amplifi-spark:          #ff463a;   /* Spark Orange — RGB 255, 70, 58 */
  --amplifi-spark-hover:    #e03a2f;   /* Darkened spark for interactive hover states */

  /* Neutral palette (light → dark) */
  --amplifi-canvas:         #f3f3ea;   /* Canvas Grey — RGB 243, 243, 234 — warm light bg */
  --amplifi-signal:         #d6dae1;   /* Signal Grey — RGB 214, 218, 225 — cool light bg */
  --amplifi-edge:           #cfd8d6;   /* Edge Grey   — RGB 207, 216, 214 — form inputs, subtle bg */
  --amplifi-boardroom:      #2e3138;   /* Boardroom Grey — RGB 46, 49, 56 — dark bg, headings */

  /* Absolute neutrals */
  --amplifi-white:          #ffffff;
  --amplifi-black:          #000000;

  /* Extended neutrals (from website implementation) */
  --amplifi-off-white:      #f6f7f5;   /* Cooler variant of canvas — section backgrounds */
  --amplifi-cream:          #f0ede6;   /* Warmer variant of canvas — alternating sections */
  --amplifi-light-grey:     #e8ebef;   /* Borders, dividers on light backgrounds */
  --amplifi-blue-grey:      #c8cdd4;   /* Disabled states, input borders */

  /* Semantic colours */
  --amplifi-success:        #22c55e;
  --amplifi-warning:        #b8860b;
  --amplifi-error:          #ff463a;   /* Same as spark */
  --amplifi-info:           #3d7ec4;


  /* ── Typography ──────────────────────────────────────── */

  --amplifi-font-sans:      'Space Grotesk', system-ui, -apple-system, sans-serif;
  --amplifi-font-serif:     'Playfair Display', Georgia, 'Times New Roman', serif;
  /* Note: Canonical brand serif is Thermal VF (brand book).
     Playfair Display is the web substitute. */

  /* Weight scale */
  --amplifi-weight-light:     300;
  --amplifi-weight-regular:   400;
  --amplifi-weight-medium:    500;
  --amplifi-weight-semibold:  600;
  --amplifi-weight-bold:      700;


  /* ── Spacing Scale ───────────────────────────────────── */

  --amplifi-sp-1:    4px;
  --amplifi-sp-2:    8px;
  --amplifi-sp-3:   12px;
  --amplifi-sp-4:   16px;
  --amplifi-sp-5:   24px;
  --amplifi-sp-6:   32px;
  --amplifi-sp-7:   48px;
  --amplifi-sp-8:   64px;
  --amplifi-sp-9:   96px;
  --amplifi-sp-10: 128px;


  /* ── Transitions ─────────────────────────────────────── */

  --amplifi-transition:       0.2s ease;
  --amplifi-transition-slow:  0.4s ease;


  /* ── Shadows ─────────────────────────────────────────── */

  --amplifi-shadow-sm:    0 2px 8px rgba(46, 49, 56, 0.06);
  --amplifi-shadow-md:    0 4px 20px rgba(46, 49, 56, 0.08);
  --amplifi-shadow-lg:    0 12px 40px rgba(46, 49, 56, 0.1);
  --amplifi-shadow-nav:   0 2px 20px rgba(46, 49, 56, 0.08);


  /* ── Layout ──────────────────────────────────────────── */

  --amplifi-max-width:    1200px;
  --amplifi-container-pad: 56px;

  /* Responsive overrides — consumers should apply these at their breakpoints:
     @media (max-width: 768px) {
       :root {
         --amplifi-container-pad: 24px;
       }
     }
  */


  /* ── Border & Radius ─────────────────────────────────── */
  /* Brand uses sharp/angular design — no rounded corners on primary elements.
     These are provided for app UI (portal, tools) where some softness helps. */

  --amplifi-radius-none:  0;        /* Buttons, cards (brand default) */
  --amplifi-radius-sm:    4px;      /* Small UI elements, tags */
  --amplifi-radius-md:    6px;      /* Input fields, dropdowns */
  --amplifi-radius-lg:    8px;      /* Modals, larger containers */


  /* ── Focus ring ──────────────────────────────────────── */

  --amplifi-focus-ring:   0 0 0 3px rgba(46, 49, 56, 0.08);

}


/* --- Base typography resets --------------------------------- */
/* Optional: include this if you want consistent base text rendering.
   Consumers can skip this by importing amplifi-tokens.css instead. */

body {
  font-family: var(--amplifi-font-sans);
  font-weight: var(--amplifi-weight-light);
  color: var(--amplifi-boardroom);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--amplifi-font-serif);
  font-weight: var(--amplifi-weight-regular);
  line-height: 1.15;
}

/* Emphasis pattern: serif italic in spark colour for key phrases */
h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--amplifi-spark);
}

/* Labels / metadata pattern */
.amplifi-label {
  font-family: var(--amplifi-font-sans);
  font-weight: var(--amplifi-weight-medium);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}