/* ============================================================
   Codemenders Oy — Global CSS Variables
   Palette: Anchored Trust (A)
   Version: 1.0 / March 2026
   Include this file in every page of codemenders.com
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     NAMED PALETTE COLORS
     The raw color definitions. Reference these when you want
     to use a specific color by its actual name.
  ---------------------------------------------------------- */

  --forest-green:     #3A7D44;
  --deep-forest:      #1E4D2B;
  --slate-teal:       #4A7C6F;
  --warm-off-white:   #F5F5F0;
  --pale-sage:        #EBF2EC;
  --burnt-sienna:     #B5541A;
  --warm-amber:       #C9960A;
  --near-black:       #1C2B22;
  --moss-grey:        #5A7A62;
  --soft-sage:        #D4E4D6;


  /* ----------------------------------------------------------
     SEMANTIC ROLE VARIABLES
     Use these throughout your CSS and components. They describe
     purpose, not color. If the palette ever changes, you only
     update the values here — nothing else in your codebase
     needs to change.
  ---------------------------------------------------------- */

  /* Core brand */
  --primary:            var(--forest-green);
  --primary-dark:       var(--deep-forest);
  --primary-hover:      #2E6337;   /* Forest Green darkened ~10% for hover states */
  --secondary:          var(--slate-teal);
  --secondary-hover:    #3A6259;   /* Slate Teal darkened ~10% for hover states  */

  /* Backgrounds */
  --bg-page:            var(--warm-off-white);
  --bg-surface:         var(--pale-sage);
  --bg-dark:            var(--deep-forest);
  --bg-darker:          #0C2416;   /* Footer bottom bar — deeper than deep-forest */
  --bg-overlay:         rgba(30, 77, 43, 0.08);   /* Subtle green tint for overlays */

  /* Accents — use sparingly */
  --accent-1:           var(--burnt-sienna);   /* Labels, pills, conversion CTA      */
  --accent-1-hover:     #8F4114;               /* Burnt Sienna darkened for hover    */
  --accent-2:           var(--warm-amber);     /* Decorative only — never for text   */

  /* Text */
  --text-primary:       var(--near-black);
  --text-secondary:     var(--moss-grey);
  --text-inverse:       var(--warm-off-white); /* Text on dark backgrounds           */
  --text-muted:         #8A9A8C;               /* Placeholder text, disabled states  */
  --text-link:          var(--forest-green);
  --text-link-hover:    var(--deep-forest);

  /* Borders and dividers */
  --border:             var(--soft-sage);
  --border-strong:      #BDD4BF;   /* Slightly darker for emphasis borders   */
  --border-focus:       var(--forest-green);   /* Focus rings on inputs              */

  /* UI components */
  --btn-primary-bg:         var(--forest-green);
  --btn-primary-text:       var(--warm-off-white);
  --btn-primary-hover:      var(--primary-hover);
  --btn-secondary-bg:       transparent;
  --btn-secondary-text:     var(--forest-green);
  --btn-secondary-border:   var(--forest-green);
  --btn-secondary-hover-bg: var(--pale-sage);
  --btn-cta-bg:             var(--burnt-sienna);   /* Conversion CTA — one use per page */
  --btn-cta-text:           var(--warm-off-white);
  --btn-cta-hover:          var(--accent-1-hover);

  /* Navigation */
  --nav-bg:             var(--deep-forest);
  --nav-text:           var(--moss-grey);
  --nav-text-active:    var(--warm-off-white);
  --nav-cta-bg:         var(--forest-green);
  --nav-cta-text:       var(--warm-off-white);

  /* Cards */
  --card-bg:            #FFFFFF;
  --card-bg-tinted:     var(--pale-sage);
  --card-border:        var(--soft-sage);
  --card-border-accent: var(--slate-teal);   /* Left accent border on feature cards */
  --card-shadow:        0 2px 8px rgba(28, 43, 34, 0.07);
  --card-shadow-hover:  0 8px 24px rgba(28, 43, 34, 0.12);

  /* Forms and inputs */
  --input-bg:           #FFFFFF;
  --input-border:       var(--soft-sage);
  --input-border-focus: var(--forest-green);
  --input-text:         var(--near-black);
  --input-placeholder:  var(--text-muted);

  /* Footer */
  --footer-bg:          var(--deep-forest);
  --footer-bottom-bg:   #0C2416;
  --footer-heading:     var(--forest-green);
  --footer-text:        var(--moss-grey);
  --footer-link:        var(--moss-grey);
  --footer-link-hover:  var(--warm-off-white);

  /* Status — deuteranopia safe, always pair with icon or label */
  --status-success-bg:  #EBF2EC;
  --status-success-text: #2D6A4F;
  --status-warning-bg:  #FBF8E8;
  --status-warning-text: #7A5A00;
  --status-error-bg:    #FBF0E8;
  --status-error-text:  #8F3010;
  --status-info-bg:     #E8F2EE;
  --status-info-text:   #2D5A52;

  /* Slide / pitch deck (for any web-based deck or presentation components) */
  --slide-bg:           var(--warm-off-white);
  --slide-bar:          var(--forest-green);
  --slide-label:        var(--burnt-sienna);
  --slide-footer-bg:    var(--pale-sage);
  --slide-cover-bg:     var(--deep-forest);
  --slide-diamond-1:    var(--warm-amber);    /* Decorative diamond on cover         */
  --slide-diamond-2:    var(--slate-teal);    /* Decorative diamond on cover         */


  /* ----------------------------------------------------------
     TYPOGRAPHY
     Font families, sizes, weights, and line heights.
  ---------------------------------------------------------- */

  --font-heading:       'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
  --font-body:          'Calibri', 'Gill Sans', 'Trebuchet MS', sans-serif;
  --font-mono:          'DM Mono', 'Courier New', monospace;

  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   40px;
  --text-4xl:   48px;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.5px;
  --tracking-normal: 0px;
  --tracking-wide:   1.5px;
  --tracking-wider:  2.5px;
  --tracking-widest: 3px;


  /* ----------------------------------------------------------
     SPACING
     Consistent spacing scale used for padding, margin, and gap.
  ---------------------------------------------------------- */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;


  /* ----------------------------------------------------------
     BORDER RADIUS
  ---------------------------------------------------------- */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 100px;


  /* ----------------------------------------------------------
     SHADOWS
  ---------------------------------------------------------- */

  --shadow-sm:  0 1px 4px rgba(28, 43, 34, 0.06);
  --shadow-md:  0 2px 8px rgba(28, 43, 34, 0.07);
  --shadow-lg:  0 4px 20px rgba(28, 43, 34, 0.09);
  --shadow-xl:  0 8px 32px rgba(28, 43, 34, 0.12);


  /* ----------------------------------------------------------
     TRANSITIONS
  ---------------------------------------------------------- */

  --transition-fast:    150ms ease;
  --transition-base:    200ms ease;
  --transition-slow:    300ms ease;


  /* ----------------------------------------------------------
     Z-INDEX SCALE
  ---------------------------------------------------------- */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

}


/* ============================================================
   GLOBAL BASE STYLES
   Minimal defaults that apply universally. Add to this section
   only styles that genuinely belong on every element.
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  margin: 0;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  }
h4 { font-size: var(--text-lg);  }
h5 { font-size: var(--text-md);  }
h6 { font-size: var(--text-base);}

/* Body text */
p {
  margin: 0;
  color: var(--text-primary);
  line-height: var(--leading-normal);
}

/* Links */
a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--text-link-hover);
}

/* Focus visible — accessibility */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Horizontal rule */
hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}

/* Images */
img {
  max-width: 100%;
  display: block;
}