/* ============================================================
   HP / Intel Co-Marketing Design System
   colors_and_type.css

   Token source-of-truth. All CSS uses vars from this file.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Real HP brand fonts — uploaded by user. */
@font-face {
  font-family: 'Forma DJR Display';
  src: url('fonts/FormaDJRDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Forma DJR Display';
  src: url('fonts/FormaDJRDisplay-Regular.ttf') format('truetype');
  font-weight: 500 800;  /* synthesized — only Regular file supplied */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Forma DJR Micro';
  src: url('fonts/FormaDJRMicro-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Forma DJR Micro';
  src: url('fonts/FormaDJRMicro-Regular.ttf') format('truetype');
  font-weight: 500 700;  /* synthesized — only Regular file supplied */
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     BRAND COLOR — HP CORE (per HP brand guidance)
     "Only use Electric Blue, black and white.
      Type should always be in black.
      White should always be used for clear and clean space.
      Electric Blue should be used for stripes and logo."
     This is the law for external paid media. Co-marketing pieces
     should respect it; the Intel co-brand palette below is
     scoped to Intel marks and required chip/badge moments only.
     ============================================================ */
  --hp-electric:       #0249D6; /* THE blue. R2 G73 B214 · Pantone 2132C (template-exact) */
  --hp-electric-press: #00339C; /* Pressed/active state — internal UI only */
  --hp-black:          #000000;
  --hp-white:          #FFFFFF;

  /* ----------------------------------------------------------
     BRAND COLOR — HP SECONDARY (very limited use)
     "Power Storm — HP's technology and future innovation.
      Orange Bloom — highlight action and creativity."
     Use sparingly, never as a primary fill, never both at once
     in the same composition unless the deck explicitly calls for it.
     ---------------------------------------------------------- */
  --hp-power-storm:    #568392; /* Pantone 2212C · slate teal-blue (template-exact) */
  --hp-orange-bloom:   #FF5050; /* Pantone 178C · coral */
  --hp-gray-accent:    #A5A3A3; /* Neutral accent from template theme (charts, dividers) */

  /* ----------------------------------------------------------
     CORE PALETTE TINTS (13-step ramp per brand color)
     Use tints 4–7 for highlighting text. Baseline = our brand.
     Reserved for information design (charts, data viz) — still
     respects the "paid media uses only Electric Blue/Black/White"
     rule by treating tints as expressive only in info contexts.
     ---------------------------------------------------------- */
  --eblue-0:  #E4EEFA;
  --eblue-1:  #C9E0FC;
  --eblue-2:  #B2D2FF;
  --eblue-3:  #8FBAFF;
  --eblue-4:  #72A3FF;
  --eblue-5:  #518CFF;
  --eblue-6:  #296EF9;
  --eblue-7:  #024AD8;  /* = --hp-electric (BASELINE) */
  --eblue-8:  #103FB2;
  --eblue-9:  #0E3191;
  --eblue-10: #0C2877;
  --eblue-11: #0A2162;
  --eblue-12: #0A1D4E;

  --obloom-0:  #FBE5E4;
  --obloom-1:  #F9D4D2;
  --obloom-2:  #FFB4B2;
  --obloom-3:  #FC9292;
  --obloom-4:  #FD7370;
  --obloom-5:  #FF5050;  /* = --hp-orange-bloom (BASELINE) */
  --obloom-6:  #E54041;
  --obloom-7:  #CC2D32;
  --obloom-8:  #B3262B;
  --obloom-9:  #941F22;
  --obloom-10: #79191B;
  --obloom-11: #5A1313;
  --obloom-12: #4B0B0C;

  --pstorm-0:  #E1EEF3;
  --pstorm-1:  #C7DFE9;
  --pstorm-2:  #B1D0DC;
  --pstorm-3:  #94BBCA;
  --pstorm-4:  #7CABBB;
  --pstorm-5:  #6D9AAB;
  --pstorm-6:  #568393;  /* = --hp-power-storm (BASELINE) */
  --pstorm-7:  #447180;
  --pstorm-8:  #356473;
  --pstorm-9:  #235262;
  --pstorm-10: #0E4353;
  --pstorm-11: #003342;
  --pstorm-12: #002935;

  /* ----------------------------------------------------------
     BRAND COLOR — INTEL (co-brand only)
     Use only where an Intel mark, chip name, or vPro badge
     legitimately requires Intel’s own color. Never use as a
     primary fill on HP-led paid media.
     ---------------------------------------------------------- */
  --intel-classic:     #0068B5;
  --intel-energy:      #00C7FD;
  --intel-deep:        #00377C;
  --intel-carbon:      #262626;

  /* ----------------------------------------------------------
     NEUTRALS — EXTREMELY LIMITED
     HP brand allows only black and white in paid media.
     The grays below are reserved for internal product UI
     (forms, tables, hairlines) and explicitly NOT for use
     in external/paid creative.
     ---------------------------------------------------------- */
  --ink-900: #000000;   /* = hp-black. All type. */
  --ink-700: #1A1A1A;
  --ink-500: #4A4A4A;
  --ink-300: #9A9A9A;
  --ink-200: #CFCFCF;
  --ink-100: #E8E8E8;
  --ink-50:  #F4F4F4;
  --ink-0:   #FFFFFF;   /* = hp-white */

  /* ----------------------------------------------------------
     SEMANTIC — product/UI only
     NOT permitted on external paid media per HP guidance.
     ---------------------------------------------------------- */
  --success: #2E7D5B;
  --warning: #C77700;
  --danger:  #C0392B;
  --info:    var(--hp-electric);

  /* ----------------------------------------------------------
     FOREGROUNDS / BACKGROUNDS (semantic aliases)
     ---------------------------------------------------------- */
  --fg-1: var(--ink-900);
  --fg-2: var(--ink-700);
  --fg-3: var(--ink-500);
  --fg-mute: var(--ink-300);
  --fg-onbrand: var(--ink-0);

  --bg-1: var(--hp-white);
  --bg-2: var(--ink-50);
  --bg-3: var(--ink-100);
  --bg-ink: var(--hp-black);     /* Black surfaces preferred over navy */
  --bg-electric: var(--hp-electric);

  --border-1: var(--ink-100);
  --border-2: var(--ink-200);
  --border-strong: var(--ink-300);

  /* ----------------------------------------------------------
     TYPE FAMILIES
     Display: Forma DJR Display — HP brand (real font, uploaded).
     Body:    Forma DJR Micro   — HP brand (real font, uploaded).
     Mono:    IBM Plex Mono     — SUBSTITUTE for Intel One Mono.
     ---------------------------------------------------------- */
  --font-display: 'Forma DJR Display', 'Intel One Display', system-ui, sans-serif;
  --font-body:    'Forma DJR Micro', 'Forma DJR Text', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Intel One Mono', ui-monospace, monospace;

  /* ----------------------------------------------------------
     TYPE SCALE (1.250 — Major Third)
     ---------------------------------------------------------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;
  --fs-6xl:  120px;

  --lh-tight: 1.08;
  --lh-snug:  1.20;
  --lh-base:  1.50;
  --lh-loose: 1.70;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-base:  0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.10em;

  /* ----------------------------------------------------------
     SPACING (4px base)
     ---------------------------------------------------------- */
  --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-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ----------------------------------------------------------
     RADII — Intel's modern wordmark is square; HP is round.
     Co-marketing pieces split the difference: small geometric radii.
     ---------------------------------------------------------- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-4: 12px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------
     SHADOWS — minimal, technical. Never blurry/soft "consumer" feel.
     ---------------------------------------------------------- */
  --shadow-1: 0 1px 0 rgba(11,18,32,0.06), 0 1px 2px rgba(11,18,32,0.06);
  --shadow-2: 0 2px 4px rgba(11,18,32,0.06), 0 6px 12px rgba(11,18,32,0.06);
  --shadow-3: 0 6px 12px rgba(11,18,32,0.08), 0 16px 32px rgba(11,18,32,0.10);
  --shadow-focus: 0 0 0 3px rgba(2, 73, 214, 0.35); /* HP Electric ring */

  /* ----------------------------------------------------------
     GRADIENTS — NOT PERMITTED.
     HP brand guidance forbids gradients on any HP creative.
     This block is intentionally empty; do not introduce gradient
     vars or fills. Solid Electric Blue, Black, or White only.
     ---------------------------------------------------------- */

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     320ms;
}

/* =============================================================
   SEMANTIC TYPE CLASSES
   Use these on real elements. h1/h2/etc map straight through.
   ============================================================= */

html { font-family: var(--font-body); color: var(--fg-1); -webkit-font-smoothing: antialiased; }
body { font-size: var(--fs-base); line-height: var(--lh-base); }

.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--hp-electric);
}

.t-display-xl, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-6xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.t-display, h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.t-h1, h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}

.t-h2, h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}

.t-h3, h4 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.t-h4, h5 {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.t-body-lg, .lede {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.t-body, p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-1);
}

.t-body-sm, small {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--fg-2);
}

.t-caption {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  color: var(--fg-3);
  letter-spacing: var(--tracking-snug);
}

.t-mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}