/*
  brand/tokens.css - Maija Morton Self-Leadership Coaching

  Single source of truth for the visual system. Warm, dark theme:
  mocha-brown surfaces, cream text, copper accent. Light cream cards for proof.
  Colours sampled directly from her Canva sales deck.
*/

:root {
  /* CORE PALETTE (from her deck) */
  --palette-mocha:       #6D4C43;  /* primary surface, ~90% of the deck */
  --palette-espresso:    #5A3E36;  /* alternate / darker section */
  --palette-deep:        #3D2820;  /* deepest, footer + overlays */
  --palette-copper:      #D07553;  /* accent: italic words, CTAs, prices */
  --palette-copper-deep: #B26648;  /* hover / shadow variant */
  --palette-tan:         #BC967A;  /* brushstroke / soft accent */
  --palette-cream:       #F3EEE9;  /* primary text on brown */
  --palette-card:        #EFEAE4;  /* light card surface (proof, pricing) */
  --palette-card-text:   #3D2820;  /* espresso text on light cards */

  /* SEMANTIC */
  --color-primary:     var(--palette-copper);     /* primary button bg */
  --color-on-primary:  #FFFFFF;                   /* primary button text */
  --color-accent:      var(--palette-copper);     /* eyebrow + link accent */
  --color-pop:         var(--palette-copper);     /* progress, active dots */
  --color-text:        var(--palette-cream);      /* default text (on brown) */
  --color-text-muted:  #CDB9AE;                   /* muted cream */
  --color-bg:          var(--palette-mocha);      /* base page surface */
  --color-bg-soft:     var(--palette-espresso);   /* alternate sections */
  --color-bg-warm:     var(--palette-copper);     /* warm accent block */
  --color-bg-dark:     var(--palette-deep);
  --color-border:      transparent;
  --color-divider:     rgba(243, 238, 233, 0.16);
  --color-success:     #7FB069;
  --color-error:       #E07A5F;

  /* TYPOGRAPHY - Playfair (all headings, serif) + Mulish (body) */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Mulish', system-ui, -apple-system, sans-serif;
  --font-accent:  'Playfair Display', Georgia, serif;  /* italic emphasis */

  --font-weight-heading: 700;
  --font-weight-body: 300;
  --font-weight-accent: 400;

  --font-size-base: 17px;
  --line-height-base: 1.7;

  /* SPACING */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* RADIUS - editorial: gently-rounded buttons, soft cards */
  --radius-button: 4px;
  --radius-card: 14px;
  --radius-input: 6px;
  --radius-pill: 999px;

  /* SHADOWS - soft, used sparingly on light cards */
  --shadow-card: 0 1px 2px rgba(61, 40, 32, 0.10), 0 10px 30px rgba(61, 40, 32, 0.14);
  --shadow-card-hover: 0 2px 6px rgba(61, 40, 32, 0.14), 0 18px 44px rgba(61, 40, 32, 0.20);

  /* CONTAINER WIDTHS */
  --container-narrow: 760px;
  --container-default: 1160px;
  --container-wide: 1440px;
}

html { font-size: var(--font-size-base); }

body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
  margin: 0;
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  line-height: 1.18;
  color: var(--color-text);
  letter-spacing: -0.005em;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { opacity: 0.82; }

img { max-width: 100%; height: auto; display: block; }