/* =========================================================
   Container Connect — Foundations
   Colors, typography, spacing, radii, shadows
   ========================================================= */

/* Fonts — via Google Fonts (Anton as display substitute for Druk Wide;
   Inter for body). Also see fonts/ for local fallbacks if added. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand ---------- */
  --cc-amber:            #F5C443;
  --cc-amber-hover:      #FFD25A;
  --cc-amber-press:      #E0AE2A;
  --cc-sage:             #7BC57F;
  --cc-sage-frost:       #9EE5A8;
  --cc-sage-deep:        #3F7A4D;

  /* ---------- Surfaces ---------- */
  --cc-surface-base:     #0A1410;  /* Onyx Forest */
  --cc-surface-section:  #0F1F1A;  /* Pine Shadow */
  --cc-surface-card:     #0D1815;  /* Hauler Slate */
  --cc-surface-elev:     #112620;  /* Forest Tier */
  --cc-surface-trust:    #0F2620;

  /* ---------- Borders ---------- */
  --cc-border-card:      #1F2E29;  /* Pine Border */
  --cc-border-sage:      rgba(123, 197, 127, 0.25);
  --cc-border-ghost:     rgba(255, 255, 255, 0.08);
  --cc-border-faint:     #3A4541;

  /* ---------- Text ---------- */
  --cc-text-primary:     #FFFFFF;
  --cc-text-secondary:   #A8B5B0;  /* Stone Mist */
  --cc-text-tertiary:    #7A8782;  /* Slate Mute */
  --cc-text-disabled:    #52605B;  /* Iron Disabled */

  /* ---------- Semantic ---------- */
  --cc-success:          #7BC57F;
  --cc-warning:          #F5C443;
  --cc-error:            #E5644E;
  --cc-info:             #7BC57F;

  /* ---------- Shadows ---------- */
  --cc-shadow-resting:
    0 0 0 1px rgba(0,0,0,0.4),
    0 2px 4px rgba(0,0,0,0.3),
    0 4px 8px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.04);

  --cc-shadow-elevated:
    0 0 0 1px rgba(0,0,0,0.4),
    0 4px 8px rgba(0,0,0,0.25),
    0 8px 16px rgba(0,0,0,0.2),
    0 16px 32px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.05);

  --cc-shadow-floating:
    0 12px 24px rgba(0,0,0,0.4),
    0 24px 48px rgba(0,0,0,0.3);

  --cc-shadow-amber-glow:
    0 0 24px rgba(245, 196, 67, 0.35),
    0 4px 12px rgba(245, 196, 67, 0.2);

  --cc-shadow-amber-glow-hover:
    0 0 32px rgba(245, 196, 67, 0.45),
    0 6px 16px rgba(245, 196, 67, 0.25);

  --cc-focus-sage:       0 0 0 3px rgba(123, 197, 127, 0.15);

  /* ---------- Gradients ---------- */
  --cc-gradient-sage:        linear-gradient(180deg, #9EE5A8 0%, #7BC57F 100%);
  --cc-gradient-ambient:     radial-gradient(ellipse at center top, rgba(63, 122, 77, 0.15) 0%, transparent 60%);
  --cc-gradient-vignette:    radial-gradient(ellipse at center, #0F1F1A 0%, #0A1410 70%);

  /* ---------- Typography ---------- */
  --cc-font-display: 'Anton', 'Oswald', 'Druk Wide Bold', 'Helvetica Neue Condensed Bold', sans-serif;
  --cc-font-body:    'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --cc-font-mono:    ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* ---------- Radii ---------- */
  --cc-radius-xs:   4px;
  --cc-radius-sm:   8px;
  --cc-radius-md:   12px;
  --cc-radius-lg:   16px;
  --cc-radius-xl:   20px;
  --cc-radius-2xl:  24px;
  --cc-radius-pill: 9999px;

  /* ---------- Spacing (8px base) ---------- */
  --cc-space-1:  4px;
  --cc-space-2:  8px;
  --cc-space-3:  12px;
  --cc-space-4:  16px;
  --cc-space-5:  24px;
  --cc-space-6:  32px;
  --cc-space-7:  48px;
  --cc-space-8:  64px;
  --cc-space-9:  96px;
  --cc-space-10: 128px;
}

/* =========================================================
   Semantic type roles
   Use these classes directly, or copy their declarations.
   ========================================================= */

.cc-display-hero {
  font-family: var(--cc-font-display);
  font-weight: 700;
  font-size: 96px;
  line-height: 1.00;
  letter-spacing: -0.5px;
  color: var(--cc-text-primary);
  text-transform: uppercase;
}

.cc-display-hero-sage {
  font-family: var(--cc-font-display);
  font-weight: 700;
  font-size: 96px;
  line-height: 1.00;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  background: var(--cc-gradient-sage);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cc-display-l  { font-family: var(--cc-font-display); font-weight: 700; font-size: 72px; line-height: 1.05; letter-spacing: -0.4px; text-transform: uppercase; color: var(--cc-text-primary); }
.cc-h1         { font-family: var(--cc-font-display); font-weight: 700; font-size: 56px; line-height: 1.10; letter-spacing: -0.3px; text-transform: uppercase; color: var(--cc-text-primary); }
.cc-h2         { font-family: var(--cc-font-display); font-weight: 700; font-size: 44px; line-height: 1.15; letter-spacing: -0.2px; text-transform: uppercase; color: var(--cc-text-primary); }
.cc-h3         { font-family: var(--cc-font-display); font-weight: 700; font-size: 32px; line-height: 1.20; letter-spacing: -0.1px; text-transform: uppercase; color: var(--cc-text-primary); }
.cc-h4         { font-family: var(--cc-font-display); font-weight: 700; font-size: 24px; line-height: 1.25; text-transform: uppercase; color: var(--cc-text-primary); }
.cc-stat-num   { font-family: var(--cc-font-display); font-weight: 700; font-size: 40px; line-height: 1.00; letter-spacing: -0.2px; color: var(--cc-text-primary); }

.cc-body-lead  { font-family: var(--cc-font-body); font-weight: 450; font-size: 20px; line-height: 1.45; color: var(--cc-text-secondary); }
.cc-body       { font-family: var(--cc-font-body); font-weight: 450; font-size: 16px; line-height: 1.55; color: var(--cc-text-primary); }
.cc-body-strong{ font-family: var(--cc-font-body); font-weight: 600; font-size: 16px; line-height: 1.55; color: var(--cc-text-primary); }
.cc-button     { font-family: var(--cc-font-body); font-weight: 600; font-size: 15px; line-height: 1.20; letter-spacing: 0.1px; }
.cc-nav-link   { font-family: var(--cc-font-body); font-weight: 550; font-size: 16px; line-height: 1.25; letter-spacing: 0.2px; }
.cc-caption    { font-family: var(--cc-font-body); font-weight: 500; font-size: 14px; line-height: 1.45; color: var(--cc-text-secondary); }

.cc-stat-label,
.cc-trust-badge {
  font-family: var(--cc-font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.20;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--cc-text-tertiary);
}
.cc-trust-badge { letter-spacing: 1.4px; color: var(--cc-sage); }

.cc-micro      { font-family: var(--cc-font-body); font-weight: 500; font-size: 11px; line-height: 1.4; letter-spacing: 0.4px; color: var(--cc-text-tertiary); }
.cc-code       { font-family: var(--cc-font-mono); font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--cc-text-primary); }

/* Signature sage gradient text — use sparingly, once per page */
.cc-sage-gradient {
  background: var(--cc-gradient-sage);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================================================
   Base page defaults (optional — opt in via body class)
   ========================================================= */
.cc-page {
  background: var(--cc-surface-base);
  color: var(--cc-text-primary);
  font-family: var(--cc-font-body);
  font-feature-settings: 'ss03' on, 'cv11' on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}