/* ============================================================
   VALICEN — Strategic Technology Services
   IT Managed Services Provider (MSP), cybersecurity-infused.
   Foundations: Color + Type tokens — values confirmed against the
   official Valicen Brand Identity Guidelines (2026).
   PRIMARY:  Bright Teal #01ADB4 · Midnight Navy #031A3A · Ice White #F0FEFF
   ACCENT:   Safety Orange #FE5701 · Soft Pearl Gray · teal→navy gradient
   Typefaces (from brand upload, /fonts):
     PRIMARY  Archivo Expanded (headlines)   SECONDARY  Manrope (body)
   ============================================================ */

/* ----------  FONT FACES  ---------- */
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-VariableFont_wdth_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Italic-VariableFont_wdth_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}
/* Archivo Expanded — used for the brand wordmark voice & big display */
@font-face {
  font-family: "Archivo Expanded";
  src: url("fonts/Archivo_Expanded-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Expanded";
  src: url("fonts/Archivo_Expanded-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Expanded";
  src: url("fonts/Archivo_Expanded-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — RAW PALETTE
     ============================================================ */

  /* Navy / Ink — the brand's structural color. #031A3A is the anchor (900). */
  --navy-950: #020F26;
  --navy-900: #031A3A;  /* BRAND NAVY */
  --navy-800: #0B2A50;
  --navy-700: #163A63;
  --navy-600: #25507F;
  --navy-500: #3A6699;
  --navy-400: #5C84B2;
  --navy-300: #8FAACB;
  --navy-200: #C2D2E2;
  --navy-100: #E4ECF4;

  /* Bright Teal — the signature brand color. Used most generously
     (per the brandbook's color-balance page): large fields, the
     gradient, data/security highlights, interactive elements, charts. */
  --teal-900: #013C40;
  --teal-800: #015458;
  --teal-700: #017279;  /* legible teal for text/links on light */
  --teal-600: #018F96;
  --teal-500: #01ADB4;  /* BRAND TEAL */
  --teal-400: #2DC4CA;
  --teal-300: #6BD8DD;
  --teal-200: #A6E8EB;
  --teal-100: #D7F4F6;
  --teal-50:  #EDFBFC;

  /* Safety Orange — the energy accent. Use sparingly (≤10%): primary
     CTAs, the dot on the "i", one key highlight. */
  --orange-700: #B53C00;
  --orange-600: #E04A00;  /* accent hover / pressed-dark */
  --orange-500: #FE5701;  /* SAFETY ORANGE */
  --orange-400: #FF7A38;
  --orange-300: #FFA372;
  --orange-200: #FFCBA8;
  --orange-100: #FFE7D7;

  /* Ice White (primary) + Soft Pearl Gray (secondary neutral) */
  --ice-white:  #F0FEFF;
  --pearl-gray: #F5F3F5;   /* confirmed: RGB 245,243,245 */

  /* Brand gradient — the official 3-stop of the primaries: navy → teal → ice.
     --gradient-brand-full is the documented swatch; --gradient-brand is a
     deep teal→navy cut for dark UI panels (keeps white text legible). */
  --gradient-brand-full: linear-gradient(218deg, #031A3A 0%, #01ADB4 52%, #F0FEFF 100%);
  --gradient-brand: linear-gradient(135deg, #01ADB4 0%, #031A3A 100%);
  --gradient-brand-soft: linear-gradient(135deg, #2DC4CA 0%, #0B2A50 100%);

  /* Neutrals — cool, very lightly navy-tinted (not pure gray) */
  --n-0:   #FFFFFF;
  --n-50:  #F6F8FA;
  --n-100: #EDF1F5;
  --n-150: #E3E9F0;
  --n-200: #D5DDE7;
  --n-300: #BCC7D4;
  --n-400: #93A1B2;
  --n-500: #6C7A8C;
  --n-600: #4E5C6E;
  --n-700: #354456;
  --n-800: #1B2C42;
  --n-900: #031A3A;
  --n-950: #020F26;

  /* Status — restrained, harmonized toward the navy/steel world */
  --success-500: #1F8A5B;
  --success-100: #DCF1E7;
  --warning-500: #D9931A;
  --warning-100: #FBEFD4;
  --danger-500:  #D23B2E;
  --danger-100:  #FADCD9;
  --info-500:    #2A6FDB;
  --info-100:    #DCE8FB;

  /* ============================================================
     COLOR — SEMANTIC (light surface, the brand default)
     ============================================================ */
  --bg-page:        #F4FAFB;   /* softened Ice White */
  --bg-surface:     var(--n-0);
  --bg-surface-2:   var(--n-100);
  --bg-sunken:      var(--n-150);
  --bg-inverse:     var(--navy-900);
  --bg-inverse-2:   var(--navy-800);

  --fg-1: var(--navy-900);   /* primary text / headings */
  --fg-2: var(--n-600);      /* body, secondary */
  --fg-3: var(--n-500);      /* muted, captions, meta */
  --fg-4: var(--n-400);      /* placeholder, disabled */
  --fg-on-dark:    var(--n-0);
  --fg-on-dark-2:  var(--navy-200);

  --brand:         var(--teal-500);   /* signature color */
  --brand-strong:  var(--teal-700);   /* legible teal on light */
  --brand-soft:    var(--teal-50);

  --accent:        var(--orange-500);  /* energy accent / primary CTA */
  --accent-hover:  var(--orange-600);
  --accent-soft:   var(--orange-100);
  --accent-fg:     var(--n-0);   /* text on orange */

  --link:          var(--teal-700);
  --link-hover:    var(--orange-500);

  --border:        var(--n-200);
  --border-strong: var(--n-300);
  --border-faint:  var(--n-150);
  --focus-ring:    var(--orange-500);

  /* ============================================================
     RADII
     ============================================================ */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ============================================================
     SPACING (4px base grid)
     ============================================================ */
  --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;

  /* ============================================================
     ELEVATION — soft, cool navy-tinted shadows (never pure black)
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(3, 26, 58, 0.06);
  --shadow-sm: 0 1px 3px rgba(3, 26, 58, 0.08), 0 1px 2px rgba(3, 26, 58, 0.06);
  --shadow-md: 0 4px 12px rgba(3, 26, 58, 0.10), 0 2px 4px rgba(3, 26, 58, 0.06);
  --shadow-lg: 0 12px 28px rgba(3, 26, 58, 0.14), 0 4px 8px rgba(3, 26, 58, 0.06);
  --shadow-xl: 0 24px 56px rgba(3, 26, 58, 0.18);
  --ring-accent: 0 0 0 3px rgba(254, 87, 1, 0.30);
  --ring-focus:  0 0 0 3px rgba(254, 87, 1, 0.40);
  --ring-brand:  0 0 0 3px rgba(1, 173, 180, 0.32);

  /* ============================================================
     TYPE — FAMILIES
     ============================================================ */
  --font-display: "Archivo Expanded", "Archivo", system-ui, sans-serif;
  --font-heading: "Archivo", system-ui, -apple-system, sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* TYPE — SCALE (px). Display uses Archivo Expanded; tight tracking. */
  --text-display: 72px;
  --text-h1: 52px;
  --text-h2: 40px;
  --text-h3: 30px;
  --text-h4: 24px;
  --text-h5: 19px;
  --text-body-lg: 19px;
  --text-body: 16px;
  --text-sm: 14px;
  --text-xs: 12.5px;
  --text-overline: 12px;

  --leading-tight: 1.05;
  --leading-snug: 1.18;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-display: -0.02em;
  --tracking-heading: -0.012em;
  --tracking-normal: 0em;
  --tracking-overline: 0.16em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.t-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}
.t-h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-1);
}
.t-h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h4);
  line-height: 1.3;
  color: var(--fg-1);
}
.t-h5 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-h5);
  line-height: 1.35;
  color: var(--fg-1);
}
.t-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}
.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.t-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.t-xs {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--fg-3);
}
.t-overline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-overline);
  line-height: 1.2;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--accent);
}
.t-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0;
  color: var(--fg-2);
}