/* ============================================================
   BRIGHTMIND CONSULTANCY — Design Tokens
   colors_and_type.css
   ============================================================ */

/* ------------------------------------------------------------
   COLOUR TOKENS — Base Palette
   ------------------------------------------------------------ */
:root {
  /* Brand Colours */
  --bm-navy:        #0A1F44;
  --bm-navy-80:     #3B4F6E;
  --bm-navy-60:     #6C7F99;
  --bm-navy-20:     #CDD4DE;
  --bm-navy-10:     #E6EAF0;

  --bm-gold:        #C9A24B;
  --bm-gold-dark:   #A6832E;
  --bm-gold-light:  #E4C97B;
  --bm-gold-10:     #F8F2E3;

  --bm-cream:       #FBF8F1;
  --bm-off-white:   #F4F0E8;
  --bm-warm-grey:   #E3DDD3;

  --bm-charcoal:    #1A1A1A;
  --bm-mid-grey:    #6B6B6B;
  --bm-light-grey:  #9A9A9A;

  --bm-white:       #FFFFFF;

  /* ------------------------------------------------------------
     SEMANTIC COLOUR TOKENS
     ------------------------------------------------------------ */

  /* Backgrounds */
  --color-bg-page:        var(--bm-cream);
  --color-bg-card:        var(--bm-off-white);
  --color-bg-card-alt:    var(--bm-white);
  --color-bg-inverse:     var(--bm-navy);
  --color-bg-accent:      var(--bm-gold-10);

  /* Foreground / Text */
  --color-text-primary:   var(--bm-charcoal);
  --color-text-secondary: var(--bm-mid-grey);
  --color-text-tertiary:  var(--bm-light-grey);
  --color-text-inverse:   var(--bm-white);
  --color-text-accent:    var(--bm-gold);
  --color-text-brand:     var(--bm-navy);

  /* Borders */
  --color-border:         var(--bm-warm-grey);
  --color-border-accent:  var(--bm-gold);
  --color-border-strong:  var(--bm-navy-20);

  /* Interactive */
  --color-cta-primary-bg:     var(--bm-gold);
  --color-cta-primary-text:   var(--bm-navy);
  --color-cta-primary-hover:  var(--bm-gold-dark);
  --color-cta-secondary-bg:   transparent;
  --color-cta-secondary-text: var(--bm-navy);
  --color-cta-secondary-border: var(--bm-navy);

  /* Focus ring */
  --color-focus-ring: rgba(201, 162, 75, 0.5);

  /* ------------------------------------------------------------
     TYPOGRAPHY — Base Scale (modular, ratio ~1.25)
     Anchor: 16px body
     ------------------------------------------------------------ */

  /* Font Families */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

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

  /* Line Heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.8;

  /* Letter Spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.12em;

  /* ------------------------------------------------------------
     SEMANTIC TYPE ROLES
     ------------------------------------------------------------ */

  /* Display Heading — Hero / Page Title */
  --h1-font:       var(--font-display);
  --h1-size:       var(--text-5xl);
  --h1-weight:     var(--fw-bold);
  --h1-leading:    var(--leading-tight);
  --h1-tracking:   var(--tracking-tight);
  --h1-color:      var(--color-text-brand);

  /* Section Heading */
  --h2-font:       var(--font-display);
  --h2-size:       var(--text-3xl);
  --h2-weight:     var(--fw-bold);
  --h2-leading:    var(--leading-snug);
  --h2-tracking:   var(--tracking-tight);
  --h2-color:      var(--color-text-brand);

  /* Sub-section Heading */
  --h3-font:       var(--font-display);
  --h3-size:       var(--text-2xl);
  --h3-weight:     var(--fw-bold);
  --h3-leading:    var(--leading-snug);
  --h3-tracking:   var(--tracking-normal);
  --h3-color:      var(--color-text-brand);

  /* Component / Card Heading */
  --h4-font:       var(--font-body);
  --h4-size:       var(--text-lg);
  --h4-weight:     var(--fw-semibold);
  --h4-leading:    var(--leading-snug);
  --h4-color:      var(--color-text-primary);

  /* Body Copy */
  --body-font:     var(--font-body);
  --body-size:     var(--text-base);
  --body-weight:   var(--fw-regular);
  --body-leading:  var(--leading-relaxed);
  --body-color:    var(--color-text-primary);

  /* Lead / Intro paragraph */
  --lead-size:     var(--text-md);
  --lead-weight:   var(--fw-regular);
  --lead-leading:  var(--leading-relaxed);
  --lead-color:    var(--color-text-secondary);

  /* Caption / Meta */
  --caption-font:    var(--font-body);
  --caption-size:    var(--text-sm);
  --caption-weight:  var(--fw-medium);
  --caption-leading: var(--leading-normal);
  --caption-color:   var(--color-text-secondary);
  --caption-tracking: var(--tracking-wide);

  /* Label / Category tag */
  --label-font:      var(--font-body);
  --label-size:      var(--text-xs);
  --label-weight:    var(--fw-medium);
  --label-tracking:  var(--tracking-widest);
  --label-color:     var(--color-text-accent);

  /* ------------------------------------------------------------
     SPACING — 8px base unit
     ------------------------------------------------------------ */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.5rem;    /* 24px */
  --space-6:   2rem;      /* 32px */
  --space-7:   3rem;      /* 48px */
  --space-8:   4rem;      /* 64px */
  --space-9:   6rem;      /* 96px */
  --space-10:  8rem;      /* 128px */

  /* ------------------------------------------------------------
     BORDER RADIUS
     ------------------------------------------------------------ */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ------------------------------------------------------------
     SHADOWS
     ------------------------------------------------------------ */
  --shadow-xs:  0 1px 3px rgba(10, 31, 68, 0.06);
  --shadow-sm:  0 2px 8px rgba(10, 31, 68, 0.07);
  --shadow-md:  0 4px 16px rgba(10, 31, 68, 0.10);
  --shadow-lg:  0 8px 32px rgba(10, 31, 68, 0.13);
  --shadow-hover: 0 6px 20px rgba(10, 31, 68, 0.13);

  /* ------------------------------------------------------------
     TRANSITIONS
     ------------------------------------------------------------ */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   400ms ease-out;

  /* ------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------ */
  --max-width-content:  720px;
  --max-width-wide:     1200px;
  --max-width-full:     1440px;
}

/* ------------------------------------------------------------
   BASE ELEMENT STYLES
   ------------------------------------------------------------ */
body {
  background-color: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  font-family: var(--h1-font);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-leading);
  letter-spacing: var(--h1-tracking);
  color: var(--h1-color);
}

h2 {
  font-family: var(--h2-font);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-leading);
  letter-spacing: var(--h2-tracking);
  color: var(--h2-color);
}

h3 {
  font-family: var(--h3-font);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-leading);
  letter-spacing: var(--h3-tracking);
  color: var(--h3-color);
}

h4 {
  font-family: var(--h4-font);
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  line-height: var(--h4-leading);
  color: var(--h4-color);
}

p {
  font-family: var(--body-font);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
  color: var(--body-color);
}

/* Utility classes */
.text-label {
  font-family: var(--label-font);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  color: var(--label-color);
  text-transform: uppercase;
}

.text-caption {
  font-family: var(--caption-font);
  font-size: var(--caption-size);
  font-weight: var(--caption-weight);
  line-height: var(--caption-leading);
  letter-spacing: var(--caption-tracking);
  color: var(--caption-color);
}

.text-lead {
  font-size: var(--lead-size);
  font-weight: var(--lead-weight);
  line-height: var(--lead-leading);
  color: var(--lead-color);
}