/*
  Design tokens — CSS custom properties only.
  ----------------------------------------------------------------------------
  Replace these placeholder values with the real tokens from the Figma file.
  Use semantic names (--color-primary, --font-size-h1) — NOT raw names
  (--blue-500, --size-32). This way the brand can shift without renaming.

  DO NOT add component rules to this file. Only custom properties.
*/

:root {

  /* ===== Colors ===== */

  /* Brand */
/* ===== Colors ===== */

  /* Raw brand palette — source of truth.
     Use these ONLY to define semantic tokens below. Never reference --brand-* directly in components. */
  --brand-maroon:        #B0194A;
  --brand-pink-dark:     #DA3268;
  --brand-pink:          #F74780;
  --brand-pink-light:    #FEECF2;
  --brand-violet:        #361374;
  --brand-purple-dark:   #653D98;
  --brand-purple:        #8657D8;
  --brand-purple-light:  #E4D4FF;
  --brand-cloud:         #F5F3FE;
  --brand-grey-1:        #A9A9A9;
  --brand-grey-2:        #757575;
  --brand-black:         #241319;
  --brand-white:         #FAF7F8;
  --true-white:          #FFFFFF;  /* for pure white needs (text, icons) — don't use --brand-white for these, as it's an off-white per design */

  /* Semantic tokens — what components actually consume. */

  /* Brand / interactive */
  --color-primary:         var(--brand-maroon);       /* strongest contrast on white — safe for text links + CTAs */
  --color-primary-hover:   var(--brand-pink-dark);    /* lifts brighter on hover */
  --color-accent:          var(--brand-purple-dark);  /* secondary accent (purples) */
  --color-accent-hover:    var(--brand-violet);

  /* Surfaces */
  --color-bg:              var(--true-white);
  --color-bg-alt:          #f5eef1;                   /* subtle warm off-white. Swap to var(--brand-pink-light) for stronger pink alt sections */
  --color-surface:         var(--brand-white);
  --color-surface-muted:   #f5eef1;

  /* Text */
  --color-text:            var(--brand-black);
  --color-text-muted:      var(--brand-grey-2);
  --color-text-inverse:    var(--true-white);
  --color-text-link:       var(--brand-maroon);
  --color-text-link-hover: var(--brand-pink-dark);

  /* Borders & dividers */
  --color-border:          var(--brand-grey-1);
  --color-border-strong:   var(--brand-grey-2);

  /* Feedback — kept universal, not brand colors (so warnings/errors look unambiguous) */
  --color-success:         #16a34a;
  --color-warning:         #d97706;
  --color-error:           #c0392b;  /* distinct from --brand-maroon */
  --color-info:            #2563eb;

  /* ===== Typography ===== */

  --font-family-base:    'Rubik', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-family-heading: 'Lexend', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-family-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Available weights (only loaded weights — don't use 700+, they won't render) */
  --font-weight-light:     300;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;

  /* Semantic weight tokens */
  --font-weight-body:      var(--font-weight-light);   /* body copy is Rubik 300 per design */

  /* Type scale — semantic. Body = 18px (1.125rem at default 16px root). */
  /* Heading sizes are placeholders until Figma gives us exact values. */
/* Type scale — semantic. Body = 18px (1.125rem at 16px root). */
  --font-size-h1: clamp(2.75rem,  5vw   + 1.5rem,  6rem);     /*  44 → 96 px */
  --font-size-h2: clamp(2rem,     3vw   + 0.75rem, 3.25rem);  /*  32 → 52 px */
  --font-size-h3: clamp(1.375rem, 1.5vw + 0.75rem, 1.875rem); /*  22 → 30 px */
  --font-size-h4: clamp(1.125rem, 0.5vw + 1rem,    1.375rem); /*  18 → 22 px */
  --font-size-h5: 1.125rem;                                    /*  18 px (defaults to body — adjust if needed) */
  --font-size-h6: 1rem;                                    /*  16 px */
  --font-size-body:  1.125rem;                                 /*  18 px — per design */
  --font-size-small-heading: 1.375rem;                            /*  22 px — for small headings that still need to pop (e.g. service titles in the difference section) */
  --font-size-small: 1rem;                                     /*  16 px */
  --font-size-xs:    0.875rem;                                 /*  14 px */
  --font-size-xxs:   0.75rem;     
  --font-size-footer-cta: clamp(2.5rem, 4vw + 1rem, 4.375rem);      
  --font-size-large-btn: 1.5rem;        
  --font-size-hero-subheading: clamp(1.375rem, 2vw + 0.75rem, 2.5rem);

  --line-height-body:    1.5;   /* 150% */
  --line-height-heading: 1.2;   /* 120% — per design */
  --line-height-tight:   1.15;  /* for tight cases (button labels, badges, captions) */
  --line-height-loose:   1.5;   /* for airy cases (hero headings, spacious sections) */

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.04em;

  /* ===== Spacing (4px base scale) ===== */

  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;    /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-18: 4.5rem;   /* 72 */
  --space-20: 5rem;     /* 80 */
  --space-22: 5.5rem;   /* 88 */
  --space-24: 6rem;     /* 96 */
  --space-28: 7rem;     /* 112 */
  --space-32: 8rem;     /* 128 */
  --space-40: 10rem;    /* 160 */
  --space-44: 11rem;    /* 176 */
  --space-48: 12rem;    /* 192 */
  --space-64: 16rem;    /* 256 */


  --ratio-media-split: 10 / 9;   /* shared shape for the two-up media band */
  --container-prose: 44rem;   /* 700 — reading column */
  --blog-header-container: 78rem;
  --container-media: 59.25rem;   /* 948 — featured image on single posts */  

  --ratio-media-statement: 1 / 1;   /* outcome panel image */
  --ratio-post-card: 10 / 9;    /* blog grid card image */
  --ratio-blog-hero: 5 / 4;     /* featured post image on the blog page */

  /* Section padding — semantic */
  --section-padding-w: clamp(var(--space-16), 10vw, var(--space-32));
  --section-padding-y: clamp(var(--space-12), 8vw, var(--space-24));
  --section-padding-x: clamp(var(--space-4), 4vw, var(--space-8));
  --section-padding-z: clamp(var(--space-4), 6vw, 114px);

  /* ===== Radii ===== */

  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-mdlg: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* ===== Shadows ===== */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

  /* ===== Layout ===== */

  --container-max: 1440px;
  --container-narrow: 768px;

  /* ===== Motion ===== */

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;

  /* ===== Z-index scale ===== */

  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 800;
  --z-modal: 900;
  --z-toast: 1000;
}

/* ===========================================================================
   Breakpoints (reference only — cannot be used inside @media rules directly)
   Use these values when writing media queries throughout the codebase.

   sm:   640px
   md:   768px
   lg:  1024px
   xl:  1280px
=========================================================================== */


/* Optional dark mode — uncomment + adjust if the design calls for it. */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f0f10;
    --color-bg-alt: #1a1a1c;
    --color-surface: #1a1a1c;
    --color-text: #f4f4f5;
    --color-text-muted: #a1a1aa;
    --color-border: #2a2a2d;
  }
}
*/


@media (max-width: 767px) {
  :root {
    --font-size-body: var(--font-size-small);
  }
}