/* ==========================================================================
   Promethean Networks — Foundations
   Colors + Typography (BLUE EDITION)
   ========================================================================== */

@import url('./assets/fonts.css');

:root {
  /* -- Brand Palette ------------------------------------------------------
     Cool, technical, enterprise: deep midnight + electric promethean blue. */

  /* Blue — the single brand accent */
  --blue:            #3F86C7;   /* base accent */
  --blue-light:      #6FA8DC;   /* hover */
  --blue-soft:       #9BC3E6;   /* top of gradients, eyebrows */
  --blue-spark:      #E8F1FA;   /* highlight inside the flame */
  --blue-deep:       #1E4F82;   /* dim end of gradients */

  /* Backwards-compat aliases (existing previews + ui kit reference these names) */
  --gold:            var(--blue);
  --gold-light:      var(--blue-light);
  --gold-dark:       var(--blue-deep);
  --gold-flame:      var(--blue-spark);
  --gold-soft:       var(--blue-soft);

  /* Midnight surfaces — brighter than the previous obsidian set */
  --midnight:        #16243C;   /* page background — brighter cool blue */
  --indigo:          #1F3158;   /* alt section bg */
  --navy:            #283F6E;   /* raised / featured cards */
  --steel:           #34548E;   /* hover / interactive */

  /* Backwards-compat aliases */
  --obsidian:        var(--midnight);
  --charcoal:        var(--indigo);
  --slate:           var(--navy);
  --onyx:            var(--midnight);

  /* Neutrals */
  --mist:            #9BC3E6;   /* body copy on dark — soft sky */
  --white:           #F4F7FB;   /* headlines */
  --off-white:       #CFE0F4;   /* nav / secondary */

  /* Translucent blue */
  --gold-a04:        rgba(63, 134, 199, 0.08);
  --gold-a06:        rgba(63, 134, 199, 0.12);
  --gold-a08:        rgba(63, 134, 199, 0.16);
  --gold-a12:        rgba(111, 168, 220, 0.20);
  --gold-a30:        rgba(111, 168, 220, 0.40);
  --gold-a40:        rgba(111, 168, 220, 0.55);
  --gold-a50:        rgba(111, 168, 220, 0.65);

  --bg: var(--midnight); --bg-alt: var(--indigo); --bg-raised: var(--navy);
  --fg: var(--white); --fg-muted: var(--mist); --fg-subtle: var(--off-white); --fg-accent: var(--blue-light);
  --border: var(--gold-a12); --border-strong: var(--gold-a40); --divider: var(--gold-a08);

  --grad-gold-vertical: linear-gradient(180deg, var(--blue-soft) 0%, var(--blue) 45%, var(--blue-deep) 100%);
  --grad-gold-flame:    linear-gradient(180deg, var(--blue-spark) 0%, var(--blue-light) 100%);
  --grad-divider:       linear-gradient(90deg, transparent, var(--blue-light), transparent);
  --grad-hero-bg:       radial-gradient(ellipse 60% 70% at 70% 50%, rgba(111,168,220,0.15) 0%, transparent 60%),
                        radial-gradient(ellipse 40% 50% at 20% 80%, rgba(40,63,110,0.9) 0%, transparent 70%),
                        linear-gradient(135deg, #16243C 0%, #1F3158 50%, #283F6E 100%);
  --grad-nav-fade:      linear-gradient(180deg, rgba(22,36,60,0.95) 0%, transparent 100%);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-thin: 200;
  --track-eyebrow: 0.35em; --track-nav: 0.20em; --track-cta: 0.18em; --track-tag: 0.20em; --track-logo: 0.50em;

  --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-14:56px; --space-16:64px;
  --space-20:80px; --space-24:96px; --space-30:120px;

  --radius-0: 0; --radius-1: 1px; --radius-pill: 9999px; --radius-full: 50%;
  --hairline: 1px solid var(--border);
  --hairline-strong: 1px solid var(--border-strong);
  --shadow-none: none;
  --shadow-overlay: 0 1px 0 0 var(--gold-a12) inset;

  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: ease;
  --duration-fast: 0.2s; --duration-base: 0.3s; --duration-slow: 0.4s;
  --duration-reveal: 0.8s; --duration-hero: 1.2s;
}

html { font-size: 16px; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-weight: var(--weight-light);
  -webkit-font-smoothing: antialiased;
}

.t-display, h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1.4; color: var(--fg); }
.t-display em, h1 em { font-style: italic; color: var(--fg-accent); }
.t-title, h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 4vw, 4rem); line-height: 1.35; color: var(--fg); }
.t-title em, h2 em { font-style: italic; color: var(--fg-accent); }
.t-heading, h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--fg); }
.t-subheading, h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; color: var(--fg); }
.t-eyebrow { font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--fg-accent); }
.t-body, p { font-family: var(--font-body); font-weight: 300; font-size: 0.82rem; line-height: 2; color: var(--fg-muted); }
.t-small { font-size: 0.72rem; line-height: 1.8; color: var(--fg-muted); font-weight: 300; }
.t-tag { font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-accent); }
.t-figure { font-family: var(--font-display); font-weight: 300; font-size: 2rem; line-height: 1; color: var(--fg-accent); }
.t-button { font-family: var(--font-body); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
code, .t-mono { font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg-subtle); background: var(--gold-a06); padding: 2px 6px; }