/* ==========================================================================
   EVERBRIGHT ENTERPRISES — brand tokens (white/premium theme)
   Ported from the React build's src/styles/tokens.css. Every component
   style in theme.css reads these variables instead of hardcoding colors.
   ========================================================================== */
@font-face{
  font-family:'Williams Bold';
  src:
    url('/assets/fonts/WilliamsBold.woff2') format('woff2'),
    url('/assets/fonts/WilliamsBold.woff') format('woff');
  font-weight:700 800;
  font-style:normal;
  font-display:swap;
}

:root{
  --paper:          #ffffff;
  --paper-soft:     #f8f9fb;
  --paper-soft-2:   #f4f6f8;
  --paper-tint:     #f5f9ff;
  --surface:        #ffffff;
  --line:           #e5e7eb;
  --line-soft:      rgba(17,17,17,.06);
  --border:         #e5e7eb;
  --pattern-line:   rgba(17,17,17,.05);

  /* Dark text is navy-tinted, never neutral black — headings/body copy read
     as "deep brand navy" up close, not a black theme. */
  --ink:            #16304a;
  --ink-soft:       #1f3f5e;
  --text:           #16304a;
  --text-muted:     #5b6b7d;
  --text-faint:     #8996a5;

  --blue:           #0892d3;
  --blue-deep:      #045a87;
  --blue-light:     #4fc3f7;
  --blue-tint:      rgba(8,146,211,.08);
  --blue-tint-strong: rgba(8,146,211,.14);
  --blue-glow:      rgba(8,146,211,.16);

  --silver:         #b9c2ca;
  --primary:        var(--blue);
  --secondary:      var(--blue-light);

  /* ---------- Deep-surface palette (replaces black everywhere) ----------
     The client asked us to drop black. Every section that used to sit on
     flat #111 (topbar, footer, hero overlay, dark feature sections) now
     sits on this navy-to-cyan brand gradient instead — still premium and
     high-contrast, but reads as "graphene/tech blue", never "black theme". */
  --navy-950:       #061826;
  --navy-900:       #0a2740;
  --navy-800:       #103a5c;
  --navy-700:       #155078;
  --gradient-deep:  linear-gradient(135deg, var(--navy-950) 0%, var(--navy-800) 55%, var(--blue-deep) 100%);
  --gradient-accent: linear-gradient(120deg, var(--blue) 0%, var(--blue-light) 50%, #7de0ff 100%);
  --on-deep:        #ffffff;
  --on-deep-muted:  rgba(255,255,255,.76);
  --on-deep-faint:  rgba(255,255,255,.5);
  --deep-line:      rgba(255,255,255,.14);

  /* ---------- Glassmorphism ---------- */
  --glass-bg:       rgba(255,255,255,.08);
  --glass-bg-light: rgba(255,255,255,.65);
  --glass-border:   rgba(255,255,255,.18);
  --glass-border-light: rgba(255,255,255,.5);

  --shadow-sm:      0 4px 14px -6px rgba(6,24,38,.08);
  --shadow-md:      0 12px 28px -10px rgba(6,24,38,.12);
  --shadow-lg:      0 24px 48px -16px rgba(6,24,38,.16);
  --shadow-blue:    0 16px 32px -12px rgba(8,146,211,.28);
  --shadow-deep:    0 30px 70px -20px rgba(6,24,38,.55);

  --radius-sm:      10px;
  --radius-md:      16px;
  --radius-lg:      24px;
  --radius-xl:      32px;
  --radius-pill:    999px;

  --font-head:      'Williams Bold', 'Poppins', Helvetica, Arial, Lucida, sans-serif;
  --font-body:      'Inter', system-ui, sans-serif;

  --ease:           cubic-bezier(.16,.8,.24,1);
  --dur:            .5s;

  --container:      1280px;
  --section-pad:    56px;
  --section-pad-sm: 32px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }