/* ============================================================
   DESIGN TOKENS — Hanwha Convergence USA
   Unified CSS custom properties for index.php and sub-pages.
   Preserves both token sets for backward compatibility.
   ============================================================ */

/* ── Font Faces ────────────────────────────────────────────── */
@font-face {
  font-family: 'Hanwha Gothic';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('../../webfonts/HanwhaGothicLOTFA.woff2') format('woff2'),
       url('../../webfonts/HanwhaGothicLOTFA.woff') format('woff');
}
@font-face {
  font-family: 'Hanwha Gothic';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../../webfonts/HanwhaGothicROTFA.woff2') format('woff2'),
       url('../../webfonts/HanwhaGothicROTFA.woff') format('woff');
}
@font-face {
  font-family: 'Hanwha Gothic';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../../webfonts/HanwhaGothicBOTFA.woff2') format('woff2'),
       url('../../webfonts/HanwhaGothicBOTFA.woff') format('woff');
}
@font-face {
  font-family: 'Hanwha';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('../../webfonts/Hanwha_L_OTFA.woff') format('woff');
}
@font-face {
  font-family: 'Hanwha';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../../webfonts/Hanwha_R_OTFA.woff') format('woff');
}
@font-face {
  font-family: 'Hanwha';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../../webfonts/Hanwha_B_OTF.woff') format('woff'),
       url('../../webfonts/Hanwha_B_OTF.otf') format('opentype');
}

/* ── Root Tokens ────────────────────────────────────────────── */
:root {
  /* --- Brand Orange --- */
  --hw-orange:       #f96d17;
  --hw-orange-dark:  #d9560d;
  --hw-orange-light: #ffb386;
  --orange-500:      #F37321;
  --orange-600:      #E05E0A;
  --orange-100:      #FDE8D5;
  --orange-ghost:    rgba(243,115,33,0.08);

  /* --- Navy / Blue --- */
  --navy-950:        #09101a;
  --navy-900:        #0f1419;
  --navy-800:        #161e28;
  --navy-700:        #353968;
  --navy-600:        #474C87;
  --navy-100:        #E8E9F2;
  --hw-navy-deep:    #1E2248;

  /* --- Neutral --- */
  --neutral-950:     #0f1720;
  --neutral-900:     #111827;
  --neutral-800:     #1f2937;
  --neutral-700:     #374151;
  --neutral-600:     #4b5563;
  --neutral-500:     #6b7280;
  --neutral-400:     #9ca3af;
  --neutral-300:     #d1d5db;
  --neutral-200:     #e5e7eb;
  --neutral-100:     #f3f4f6;
  --neutral-50:      #f8fafc;

  /* --- Grey (sub-page system) --- */
  --grey-900:        #1A1A1A;
  --grey-800:        #2C2C2C;
  --grey-700:        #444444;
  --grey-600:        #555555;
  --grey-500:        #767676;
  --grey-400:        #9E9E9E;
  --grey-100:        #F4F3F0;
  --grey-50:         #FAFAF8;

  /* --- Backgrounds --- */
  --white:           #ffffff;
  --page-light:      #f7f7f3;
  --page-light-2:    #fcfcf9;
  --sand:            #EAE6DF;
  --hw-white:        #ffffff;
  --hw-offwhite:     #FAFAF8;
  --hw-grey-light:   #EFEEEC;
  --hw-grey:         #9A9690;
  --hw-grey-dark:    #5C5955;
  --hw-charcoal:     #2C2B29;
  --hw-black:        #141412;

  /* --- Typography --- */
  --font-d:          'Hanwha Gothic', sans-serif;
  --font-b:          'Hanwha Gothic', sans-serif;
  --font-sans:       'Hanwha Gothic', sans-serif;
  --font-display:    'Hanwha Gothic', sans-serif;
  --font-brand:      'Hanwha', 'Hanwha Gothic', sans-serif;

  /* --- Spacing --- */
  --sp-sm:           1rem;
  --sp-md:           1.5rem;
  --sp-lg:           2.5rem;
  --sp-xl:           4rem;
  --sp-2xl:          6rem;

  /* --- Container --- */
  --container:       1200px;
  --container-wide:  1400px;
  --container-max:   1280px;
  --container-pad:   40px;

  /* --- Radii & Shadows --- */
  --radius-sm:       4px;
  --radius-md:       8px;
  --shadow-sm:       0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:       0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:       0 12px 40px rgba(0,0,0,0.14);

  /* --- Easing --- */
  --tr:              0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-soft:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease:            cubic-bezier(.25,.46,.45,.94);
  --trans-fast:      180ms cubic-bezier(.25,.46,.45,.94);
  --trans-med:       320ms cubic-bezier(.25,.46,.45,.94);
}

.brand-name {
  font-family: var(--font-brand) !important;
  font-weight: inherit;
}
.company-subnav__link .brand-name {
  margin-left: .25em;
}

/* Temporary review state: hide orange category/eyebrow labels without deleting markup. */
.overline,
[class*="__eyebrow"] {
  display: none !important;
}

@media (max-width: 1024px) {
  :root { --sp-xl: 3rem; --sp-2xl: 4.5rem; }
}
@media (max-width: 768px) {
  :root { --sp-xl: 2.5rem; --sp-2xl: 3.5rem; --container-pad: 20px; }
}