/* ============================================================
   Carpenter Consulting Group — Colors & Type
   Drop-in stylesheet. Import alongside your component CSS.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     COLOR — primary palette
     CCG is GREEN. Never blue.
     ---------------------------------------------------------- */
  --ccg-green:        #5B9B3E;
  --ccg-green-hover:  #4E8735;
  --ccg-green-light:  #A8D88A;
  --ccg-black:        #1A1A1A;
  --ccg-white:        #FFFFFF;

  /* COLOR — neutrals */
  --ccg-gray-dark:    #4A4A4A;
  --ccg-gray-mid:     #808080;
  --ccg-gray-light:   #F2F2F2;
  --ccg-divider:      #D9D9D9;

  /* COLOR — status */
  --ccg-status-active-bg:  #5B9B3E;
  --ccg-status-active-fg:  #FFFFFF;
  --ccg-status-pending-bg: #F2F2F2;
  --ccg-status-pending-fg: #4A4A4A;
  --ccg-status-risk-bg:    #FFF3CD;
  --ccg-status-risk-fg:    #856404;
  --ccg-status-closed-bg:  #1A1A1A;
  --ccg-status-closed-fg:  #FFFFFF;

  /* COLOR — semantic aliases */
  --color-primary:    var(--ccg-green);
  --color-primary-hover: var(--ccg-green-hover);
  --color-text:       var(--ccg-gray-dark);
  --color-text-strong:var(--ccg-black);
  --color-heading:    var(--ccg-green);
  --color-bg:         var(--ccg-white);
  --color-bg-alt:     var(--ccg-gray-light);
  --color-border:     var(--ccg-divider);
  --color-muted:      var(--ccg-gray-mid);

  /* ----------------------------------------------------------
     TYPE — family
     Helvetica Neue is the canonical face.
     System stack falls back to Helvetica → Arial → sans.
     ---------------------------------------------------------- */
  --font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-family-mono: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;

  /* TYPE — size scale */
  --text-hero:    48px;
  --text-h1:      36px;
  --text-h2:      28px;
  --text-h3:      22px;
  --text-h4:      18px;
  --text-body-lg: 17px;
  --text-body:    16px;
  --text-body-sm: 15px;
  --text-button:  14px;
  --text-caption: 13px;
  --text-footer:  12px;

  /* TYPE — weights */
  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* TYPE — line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.2;
  --lh-normal: 1.4;
  --lh-body:   1.6;

  /* ----------------------------------------------------------
     SPACING — 8px grid
     ---------------------------------------------------------- */
  --space-xxs: 4px;
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;

  /* RADIUS */
  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-pill: 999px;

  /* BORDERS */
  --border-thin:   1px;
  --border-medium: 2px;
  --border-accent: 3px;

  /* SHADOWS — subtle only */
  --shadow-card:     0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.08);

  /* LAYOUT */
  --container-max: 1100px;
  --gutter:        24px;

  /* MOTION */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

body {
  font-family: var(--font-family);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  margin: 0 0 var(--space-sm);
  color: var(--ccg-green);
  text-wrap: balance;
}

.hero, h1.hero {
  font-size: var(--text-hero);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
}

h1 { font-size: var(--text-h1); font-weight: var(--weight-bold);     line-height: var(--lh-tight); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-bold);     line-height: var(--lh-snug); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: 1.3; color: var(--ccg-black); }
h4 { font-size: var(--text-h4); font-weight: var(--weight-semibold); line-height: var(--lh-normal); color: var(--ccg-black); }

p {
  margin: 0 0 var(--space-sm);
  text-wrap: pretty;
}

.body-lg { font-size: var(--text-body-lg); line-height: var(--lh-body); }
.body    { font-size: var(--text-body);    line-height: var(--lh-body); }
.body-sm { font-size: var(--text-body-sm); line-height: var(--lh-body); }
.caption { font-size: var(--text-caption); color: var(--ccg-gray-mid); line-height: var(--lh-normal); }
.footer-text { font-size: var(--text-footer); color: var(--ccg-gray-mid); line-height: var(--lh-normal); }

a {
  color: var(--ccg-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--ccg-green-hover); }

strong, b { font-weight: var(--weight-bold); color: var(--ccg-black); }

code, kbd, samp, pre {
  font-family: var(--font-family-mono);
  font-size: 0.95em;
}

hr.rule-accent {
  border: none;
  border-top: var(--border-medium) solid var(--ccg-green);
  width: 60px;
  margin: var(--space-lg) 0;
}
hr.rule-full {
  border: none;
  border-top: var(--border-thin) solid var(--ccg-divider);
  margin: var(--space-lg) 0;
}

/* Buttons share button text style */
.text-button {
  font-size: var(--text-button);
  font-weight: var(--weight-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1;
}

/* Containers */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}