/*
  ============================================================
  MAGSTADT CONSULTING — BRAND DESIGN TOKENS
  brand-tokens.css  |  v1.0

  HOW TO USE:
  Add this line to the top of every page stylesheet:
    @import url('./brand-tokens.css');

  Then reference variables anywhere:
    color: var(--color-primary-500);
    font-family: var(--font-display);

  NEVER hard-code hex values or sizes on pages.
  All changes to the brand start here.
  ============================================================
*/

:root {

  /* ─────────────────────────────────────────────────────────
     PRIMARY COLOR — Deep Warm Teal
     Use for: nav, headings, primary buttons, links, borders
  ───────────────────────────────────────────────────────── */
  --color-primary-50:  #EDF4F6;
  --color-primary-100: #C9DFE5;
  --color-primary-200: #97BFC9;
  --color-primary-300: #5E9EAD;
  --color-primary-400: #3D7E90;
  --color-primary-500: #2A5C6B;   /* MAIN */
  --color-primary-600: #1F4A56;
  --color-primary-700: #163742;
  --color-primary-800: #0E242D;
  --color-primary-900: #071218;

  /* ─────────────────────────────────────────────────────────
     SECONDARY COLOR — Warm Amber
     Use for: CTA highlights, data callouts, hover states, icons
  ───────────────────────────────────────────────────────── */
  --color-secondary-50:  #FEF8EC;
  --color-secondary-100: #FCEBC6;
  --color-secondary-200: #F8D48A;
  --color-secondary-300: #F3BC4E;
  --color-secondary-400: #EEA630;
  --color-secondary-500: #E8941A;   /* MAIN */
  --color-secondary-600: #C97A12;
  --color-secondary-700: #A6610B;
  --color-secondary-800: #7C4807;
  --color-secondary-900: #4E2D03;

  /* ─────────────────────────────────────────────────────────
     ACCENT COLOR — Terracotta
     Use for: warmth accents, highlights, human moments (sparingly)
  ───────────────────────────────────────────────────────── */
  --color-accent-50:  #FBF0EC;
  --color-accent-100: #F4D0C4;
  --color-accent-200: #E9A898;
  --color-accent-300: #DB7E6A;
  --color-accent-400: #CF6550;
  --color-accent-500: #C05038;   /* MAIN */
  --color-accent-600: #A0402B;
  --color-accent-700: #7E3020;
  --color-accent-800: #5B2116;
  --color-accent-900: #37120C;

  /* ─────────────────────────────────────────────────────────
     NEUTRAL WARM GRAYS
     Use for: backgrounds, text, borders, dividers, surfaces
  ───────────────────────────────────────────────────────── */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #FAF7F2;   /* page background */
  --color-neutral-100: #F2EDE6;
  --color-neutral-200: #E5DDD4;   /* borders, dividers */
  --color-neutral-300: #D2C9BE;
  --color-neutral-400: #B4AAA0;   /* placeholder text */
  --color-neutral-500: #8C837A;   /* secondary text */
  --color-neutral-600: #6B635C;   /* body text light */
  --color-neutral-700: #4A433E;
  --color-neutral-800: #2C2825;   /* primary body text */
  --color-neutral-900: #161310;   /* darkest */

  /* ─────────────────────────────────────────────────────────
     SEMANTIC / STATUS COLORS
  ───────────────────────────────────────────────────────── */
  --color-success:     #3D7A57;
  --color-success-bg:  #EAF5EE;
  --color-warning:     #C87D10;
  --color-warning-bg:  #FEF3DC;
  --color-error:       #B03020;
  --color-error-bg:    #FAE8E6;
  --color-info:        #2A5C6B;
  --color-info-bg:     #EDF4F6;

  /* ─────────────────────────────────────────────────────────
     TYPOGRAPHY
  ───────────────────────────────────────────────────────── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Font Sizes */
  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.25rem;     /* 20px */
  --text-2xl:  1.5rem;      /* 24px */
  --text-3xl:  1.875rem;    /* 30px */
  --text-4xl:  2.25rem;     /* 36px */
  --text-5xl:  3rem;        /* 48px */
  --text-6xl:  3.75rem;     /* 60px */

  /* Font Weights */
  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* Line Heights */
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* ─────────────────────────────────────────────────────────
     SPACING SCALE
  ───────────────────────────────────────────────────────── */
  --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-24: 6rem;      /* 96px */

  /* ─────────────────────────────────────────────────────────
     BORDER RADIUS
  ───────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ─────────────────────────────────────────────────────────
     BOX SHADOWS
  ───────────────────────────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(44,40,37,0.05);
  --shadow-sm:   0 1px 3px rgba(44,40,37,0.08), 0 1px 2px rgba(44,40,37,0.06);
  --shadow-md:   0 4px 6px rgba(44,40,37,0.07), 0 2px 4px rgba(44,40,37,0.05);
  --shadow-lg:   0 10px 15px rgba(44,40,37,0.07), 0 4px 6px rgba(44,40,37,0.05);
  --shadow-xl:   0 20px 25px rgba(44,40,37,0.08), 0 8px 10px rgba(44,40,37,0.05);
  --shadow-warm: 0 4px 20px rgba(42,92,107,0.15);

  /* ─────────────────────────────────────────────────────────
     TRANSITIONS
  ───────────────────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
  --transition-slower: 400ms ease;

  /* ─────────────────────────────────────────────────────────
     LAYOUT / CONTAINERS
  ───────────────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1536px;
}