/* ============================================================
   PROCOM DESIGN SYSTEM  —  single stylesheet
   Source: Claude Design handoff bundle "Procom Design System".
   Fonts subset to Latin and converted OTF/TTF -> woff2.

   Serve from:  public/css/procom-ds.css
   Fonts at:    public/fonts/procom/*.woff2

   Aspira            = body, subheadings, captions   (--font-sans)
   Boris Black Bloxx = main headings + logo, wt 400  (--font-heading)
   Brand orange      = #E05B0F   (confirmed against original logo art)
   ============================================================ */

/* ---------- Aspira ---------- */
@font-face {
  font-family: "Aspira";
  src: url("/fonts/procom/aspira-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aspira";
  src: url("/fonts/procom/aspira-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aspira";
  src: url("/fonts/procom/aspira-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aspira";
  src: url("/fonts/procom/aspira-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aspira";
  src: url("/fonts/procom/aspira-heavy.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Optional extras — copy from fonts/optional/ and uncomment if needed.
@font-face { font-family:"Aspira"; src:url("/fonts/procom/aspira-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Aspira"; src:url("/fonts/procom/aspira-black.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; }
*/

/* ---------- Boris Black Bloxx — headings + logo ---------- */
@font-face {
  font-family: "Boris Black Bloxx";
  src: url("/fonts/procom/borisblackbloxx.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   PROCOM — Colour tokens  (per official Corporate Colour Guide)
   Brand palette: ORANGE, BLACK(#222), WHITE, with a defined GREY.
   "Do not use any other colour models than the official spec."
   ============================================================ */
:root {
  /* --- Brand orange (primary) ---------------------------------
     Official: CMYK 7/80/100/2 · RGB 224,91,15 · Pantone 1595C.
     RESOLVED 2026-07: sampled the original supplied logo artwork
     (DARK TRANS.png) — 14,220px of #E05B0F, zero #F45B0F. The guide's
     printed web hex was a typo. #E05B0F is authoritative. -------*/
  --procom-orange:      #E05B0F;   /* THE brand colour */
  --orange-50:          #FDF0E7;   /* wash / tint background */
  --orange-100:         #FAD9C2;
  --orange-200:         #F4B488;
  --orange-300:         #ED8E4E;
  --orange-400:         #E6741F;
  --orange-500:         #E05B0F;   /* = --procom-orange */
  --orange-600:         #C24E0C;   /* hover */
  --orange-700:         #9E3F0B;   /* pressed / orange text on white (AA) */
  --orange-glow:        #FF7A1A;   /* cinematic flame highlight */

  /* --- Black / ink  (official "black" is #222222) ------------- */
  --black:              #222222;   /* official brand black */
  --ink-900:            #161616;   /* deepest surface (cinematic bg) */
  --ink-800:            #1E1E1E;   /* raised dark surface */
  --ink-700:            #2C2C2C;   /* dark card / hairline on black */
  --ink-600:            #3A3A3A;
  --true-black:         #000000;   /* photographic backdrops only */

  /* --- Grey (official) + neutral support --------------------- */
  --procom-grey:        #808080;   /* official brand grey, Pantone 6212C */
  --grey-600:           #5F5F5F;
  --grey-500:           #808080;   /* = --procom-grey */
  --grey-400:           #A6A6A6;
  --grey-300:           #CACACA;
  --grey-200:           #E4E3E1;
  --grey-100:           #F0EFEC;
  --grey-50:            #F7F7F5;   /* studio off-white */

  /* --- White ------------------------------------------------- */
  --white:              #FFFFFF;   /* pure brand white / studio bg */

  /* --- Semantic aliases -------------------------------------- */
  --brand:              var(--procom-orange);
  --brand-hover:        var(--orange-600);
  --brand-press:        var(--orange-700);

  --bg-studio:          var(--white);     /* product-promo background */
  --bg-page:            var(--grey-50);
  --bg-night:           var(--ink-900);   /* authority / cinematic background */
  --surface-card:       var(--white);
  --surface-card-dark:  var(--ink-800);
  --surface-sunken:     var(--grey-100);

  --text-strong:        var(--black);      /* headlines on light */
  --text-body:          #2A2A2A;           /* body on light */
  --text-muted:         var(--grey-500);
  --text-on-dark:       var(--white);
  --text-on-dark-muted: var(--grey-400);
  --text-on-brand:      var(--white);      /* text sitting on orange */
  --text-accent:        var(--orange-700); /* orange text on white (AA) */

  --border-hairline:    var(--grey-200);
  --border-strong:      var(--black);
  --border-on-dark:     var(--ink-700);

  /* Status (orange owns "active"/warning) */
  --success:            #1F9D55;
  --warning:            var(--procom-orange);
  --danger:             #D7281F;
}

/* ============================================================
   PROCOM — Typography tokens  (per official guide)
   "NO OTHER FONT IS PERMITTED."
   • Boris Black Bloxx  → MAIN HEADINGS + the logo (chunky, geometric).
   • Aspira             → subheadings, body, inline, captions.
   ============================================================ */
:root {
  /* --- Families ------------------------------------------ */
  --font-heading: "Boris Black Bloxx", "Aspira", sans-serif; /* main headings + logo */
  --font-logo:    "Boris Black Bloxx", "Aspira", sans-serif; /* (= heading) wordmark */
  --font-sans:    "Aspira", "Helvetica Neue", Arial, sans-serif; /* body + subheads */
  --font-display: var(--font-heading); /* alias */

  /* --- Weights (Aspira) ---------------------------------- */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-heavy:    800; /* @kind font */
  --fw-black:    900; /* @kind font */

  /* --- Type scale (px) ----------------------------------- */
  --fs-display:  84px;   /* poster / hero headline (Boris) */
  --fs-h1:       58px;
  --fs-h2:       40px;
  --fs-h3:       26px;   /* subheading — Aspira */
  --fs-h4:       20px;
  --fs-lg:       19px;
  --fs-body:     16px;
  --fs-sm:       14px;
  --fs-xs:       12px;
  --fs-price:    72px;   /* big pricing numerals (Boris) */

  /* --- Line heights -------------------------------------- */
  --lh-tight:    0.98;   /* @kind other */
  --lh-snug:     1.12;   /* @kind other */
  --lh-normal:   1.5;    /* @kind other */
  --lh-relaxed:  1.65;   /* @kind other */

  /* --- Letter spacing ------------------------------------ */
  --ls-tight:    -0.01em;  /* @kind other */
  --ls-normal:   0;        /* @kind other */
  --ls-label:    0.08em;   /* @kind other */
  --ls-wide:     0.14em;   /* @kind other */
}

/* Convenience utility classes -------------------------------- */
.t-display { font-family: var(--font-heading); font-weight: 400;
  font-size: var(--fs-display); line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight); }
.t-h1 { font-family: var(--font-heading); font-weight: 400;
  font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.t-h2 { font-family: var(--font-heading); font-weight: 400;
  font-size: var(--fs-h2); line-height: var(--lh-snug); }
.t-h3 { font-family: var(--font-sans); font-weight: var(--fw-heavy);
  font-size: var(--fs-h3); line-height: var(--lh-snug); }  /* subheading = Aspira */
.t-body { font-family: var(--font-sans); font-weight: var(--fw-regular);
  font-size: var(--fs-body); line-height: var(--lh-normal); }
.t-label { font-family: var(--font-sans); font-weight: var(--fw-bold);
  font-size: var(--fs-xs); line-height: 1; letter-spacing: var(--ls-label);
  text-transform: uppercase; }
.t-tagline { font-family: var(--font-sans); font-weight: var(--fw-medium);
  font-size: var(--fs-sm); letter-spacing: var(--ls-wide); text-transform: lowercase; }
.t-logo { font-family: var(--font-logo); text-transform: uppercase; }

/* ============================================================
   PROCOM — Spacing & layout tokens
   8px base grid. Generous, confident spacing.
   ============================================================ */
:root {
  --space-0:   0;
  --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;

  /* Layout */
  --container:        1200px;
  --container-narrow: 880px;
  --gutter:           32px;
  --gutter-tight:     16px;

  /* Signature accents are CIRCULAR / rounded — never angular.
     Use big orange circles, arcs and rounded panels behind content. */
  --accent-circle-lg: 720px;   /* @kind other */
  --accent-circle-md: 420px;   /* @kind other */
}

/* ============================================================
   PROCOM — Effects: radii, borders, shadows, motion
   Per guide: circles & ROUNDED corners are a recurring motif;
   SHARP / ANGULAR shapes are avoided. Everything is soft-cornered;
   icons and accents lean circular.
   ============================================================ */
:root {
  /* --- Corner radii (generous & rounded) ----------------- */
  --radius-xs:  6px;     /* tags, small chips */
  --radius-sm:  10px;    /* inputs */
  --radius-md:  16px;    /* default cards & buttons */
  --radius-lg:  24px;    /* large media / panels */
  --radius-xl:  36px;    /* hero panels, big rounded accents */
  --radius-pill: 999px;  /* buttons, pills, avatars, icon coins */
  --radius-circle: 50%;  /* the brand's signature circular accent */

  /* --- Borders ------------------------------------------- */
  --bw-hair:    1px;
  --bw-bold:    2px;
  --bw-slab:    3px;     /* rounded accent rule */

  /* --- Shadows (soft, grounded) -------------------------- */
  --shadow-xs:  0 1px 3px rgba(34,34,34,0.08);
  --shadow-sm:  0 3px 10px rgba(34,34,34,0.10);
  --shadow-md:  0 10px 26px rgba(34,34,34,0.13);
  --shadow-lg:  0 22px 50px rgba(34,34,34,0.18);
  --shadow-product: 0 34px 64px -20px rgba(34,34,34,0.30); /* floating product cut-out */
  --shadow-orange:  0 12px 30px -8px rgba(224,91,15,0.50); /* glowing CTA / coin */

  /* --- Motion (friendly, confident) ---------------------- */
  --ease-out:    cubic-bezier(0.16, 0.84, 0.30, 1);   /* @kind other */
  --ease-snap:   cubic-bezier(0.34, 1.28, 0.50, 1);   /* @kind other */
  --dur-fast:    120ms;  /* @kind other */
  --dur-base:    220ms;  /* @kind other */
  --dur-slow:    380ms;  /* @kind other */

  /* --- Focus ring ---------------------------------------- */
  --focus-ring:  0 0 0 3px rgba(224,91,15,0.42);
}