/* ============================================================
   OMNIA IT Security Consulting — Color & Type Foundations
   Premium black + metallic gold identity, steel-blue accent.
   ============================================================ */

:root {
  /* ---- Brand: Gold ---- */
  --gold:            #D4AF37; /* Metallic gold — logo, headings, CTAs, highlights */
  --gold-highlight:  #FFF1A8; /* Light gold — gradient shine, hover accents */
  --gold-shadow:     #B88913; /* Deep gold — gradient depth, borders */
  /* Signature gold gradient (wordmark, CTAs, rules) */
  --gold-gradient:   linear-gradient(180deg, #FFF1A8 0%, #E6C658 38%, #D4AF37 64%, #B88913 100%);
  --gold-gradient-h: linear-gradient(90deg, #B88913 0%, #D4AF37 40%, #FFF1A8 100%);

  /* ---- Brand: Black & dark ---- */
  --black:           #050505; /* Primary near-black background */
  --dark-stroke:     #101010; /* Soft black — logo stroke/shadow */
  --steel-shadow:    #06080A; /* Almost-black blue — icon depth, dark UI accents */

  /* ---- Accent: Steel Blue (use sparingly — security/tech) ---- */
  --steel:           #1E3A4A; /* Deep steel blue — icon core, accents */
  --steel-highlight: #3D5060; /* Muted steel — subtle gradients, cards, dividers */

  /* ---- Neutrals ---- */
  --charcoal:        #141414; /* Dark text on light backgrounds */
  --silver:          #C9CED6; /* Light text on dark backgrounds */
  --off-white:       #F7F4EC; /* Warm off-white — light website sections */
  --white:           #FFFFFF;

  /* ---- Semantic surfaces ---- */
  --bg-dark:         var(--black);
  --bg-dark-2:       #0C0D0F;   /* Slightly raised dark surface */
  --bg-light:        var(--off-white);
  --bg-light-2:      #FFFFFF;   /* Raised light surface / cards */
  --surface-steel:   #11202A;   /* Deep steel card on dark */

  /* ---- Semantic text ---- */
  --fg-on-dark:      var(--silver);     /* Body text on dark */
  --fg-on-dark-strong:#EDEFF2;          /* Headlines on dark (non-gold) */
  --fg-on-light:     var(--charcoal);   /* Body text on light */
  --fg-muted-dark:   #8B919B;           /* Muted text on dark */
  --fg-muted-light:  #5B5F66;           /* Muted text on light */
  --fg-gold:         var(--gold);

  /* ---- Borders & dividers ---- */
  --border-on-dark:  rgba(212,175,55,0.22);  /* Faint gold hairline on dark */
  --border-on-dark-neutral: rgba(201,206,214,0.14);
  --border-on-light: rgba(20,20,20,0.12);
  --divider-gold:    var(--gold-gradient-h);

  /* ---- Status (derived, harmonized to palette) ---- */
  --ok:      #4E9A6B;
  --warn:    var(--gold);
  --danger:  #C0473B;
  --info:    var(--steel-highlight);

  /* ============================================================
     TYPOGRAPHY
     Wordmark / display: Georgia serif (premium, wide tracking)
     Body / UI: Arial / Helvetica sans (clean, businesslike)
     ============================================================ */
  --font-serif: Georgia, "Times New Roman", "PT Serif", serif;
  --font-sans:  Arial, Helvetica, "Liberation Sans", sans-serif;
  --font-mono:  "SF Mono", "Consolas", "Liberation Mono", monospace;

  /* Type scale (1.250 major third, 16px base) */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.5rem;    /* 24px */
  --text-xl:   2rem;      /* 32px */
  --text-2xl:  2.75rem;   /* 44px */
  --text-3xl:  3.75rem;   /* 60px */
  --text-display: 5rem;   /* 80px */

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading-normal:1.55;
  --leading-loose: 1.7;

  /* Letter spacing — OMNIA brand uses wide tracking on serif caps + tagline */
  --tracking-wordmark: 0.18em;
  --tracking-tagline:  0.34em;  /* "IT SECURITY CONSULTING" */
  --tracking-eyebrow:  0.22em;
  --tracking-tight:   -0.01em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

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

  /* ---- Radii (restrained — premium, mostly small) ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---- Shadows / elevation ---- */
  --shadow-sm:  0 1px 2px rgba(5,5,5,0.18);
  --shadow-md:  0 6px 20px rgba(5,5,5,0.28);
  --shadow-lg:  0 18px 48px rgba(5,5,5,0.40);
  /* Gold glow — used on hover for key icons / CTAs on dark */
  --glow-gold:  0 0 0 1px rgba(212,175,55,0.5), 0 8px 30px rgba(212,175,55,0.22);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES (opt-in via .omnia-prose or direct use)
   ============================================================ */

.omnia-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}

.omnia-h1 {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.omnia-h2 {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
}

.omnia-h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.omnia-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

.omnia-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* Wordmark treatment — Georgia caps, wide tracking, gold gradient fill */
.omnia-wordmark {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.omnia-tagline {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tagline);
  text-transform: uppercase;
}

/* Gold text fill helper */
.omnia-gold-text {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}