/* ============================================================
   PI TELECOM — Colors & Type foundations
   Single source of truth for color + typography tokens.
   Import this file first, then layer component styles on top.
   ============================================================ */

/* ---- Type face -------------------------------------------------
   Pi Telecom's marketing surface uses a single heavy geometric
   grotesque. The production face is a licensed display sans; the
   open-source stand-in used across this design system is ARCHIVO
   (variable, weights 300–900, plus an Expanded optical width that
   echoes the billboard proportions). Swap the @font-face / import
   if the licensed face is dropped into /fonts.
----------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ============ COLOR — RAW PALETTE ============ */
  --pi-red:            #C0212E;  /* Pi Red — the single brand accent */
  --pi-red-press:      #9E1A25;  /* pressed / hover-darken */
  --pi-red-soft:       #F7E4E6;  /* faint red wash (validation tint) */

  --pi-ink:            #23282B;  /* near-black brand surface + text */
  --pi-ink-2:          #2E3438;  /* raised dark panel */
  --pi-charcoal-hi:    #545454;  /* logomark gradient — light stop */
  --pi-charcoal-lo:    #242424;  /* logomark gradient — dark stop */

  --pi-canvas:         #FFFFFF;  /* default light content background */
  --pi-canvas-soft:    #F2F2F2;  /* badge-chip / inset surface */

  --pi-body:           #7E7E7E;  /* secondary body text on light */
  --pi-mute:           #BEBEBE;  /* lowest-priority text / placeholder */
  --pi-on-dark:        #FFFFFF;  /* text + logo on ink surfaces */
  --pi-line:           #E4E4E4;  /* hairline on light surfaces */
  --pi-line-dark:      rgba(255,255,255,.22); /* hairline on dark */

  /* ============ COLOR — SEMANTIC ROLES ============ */
  --bg:                var(--pi-canvas);
  --bg-soft:           var(--pi-canvas-soft);
  --bg-dark:           var(--pi-ink);
  --fg:                var(--pi-ink);    /* primary text */
  --fg-2:              var(--pi-body);   /* secondary text */
  --fg-3:              var(--pi-mute);   /* tertiary text */
  --fg-on-dark:        var(--pi-on-dark);
  --accent:            var(--pi-red);
  --accent-press:      var(--pi-red-press);
  --border:            var(--pi-line);

  /* ============ TYPE — FAMILY ============ */
  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ============ TYPE — WEIGHTS ============ */
  --w-light:  300;
  --w-reg:    400;
  --w-med:    500;
  --w-semi:   600;
  --w-bold:   700;
  --w-black:  800;

  /* ============ SPACING (base 4px) ============ */
  --space-xxs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 48px;
  --space-5xl: 64px;
  --space-6xl: 96px;

  /* ============ RADII ============ */
  --r-none:    0px;
  --r-xs:      1px;
  --r-sm:      6px;   /* canonical content radius (cards, inputs, images) */
  --r-card:    6px;
  --r-pill-md: 32px;  /* badge / chip pills */
  --r-pill-lg: 60px;  /* signature CTA pill */
  --r-full:    9999px;/* circular icon containers */

  /* ============ ELEVATION ============
     Pi Telecom uses surface-contrast for depth, NOT soft shadows.
     Only two real levels exist; a faint shadow is reserved for
     transient overlays (modal / toast) only. */
  --shadow-flat:    none;
  --shadow-hair:    inset 0 0 0 1px var(--pi-ink);
  --shadow-overlay: 0 24px 60px -20px rgba(35,40,43,.35);
}

/* ============================================================
   BASE / RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--w-reg);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   TYPOGRAPHIC ROLES
   Map straight onto the documented hierarchy. Use the class or
   copy the declarations. Display roles set tight tracking by
   design — that calibration is part of the brand voice.
   ============================================================ */

/* —— Hero stencil: weight 800, UPPERCASE, ultra-tight —— */
.t-display-hero {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: 144px;
  line-height: 114px;
  letter-spacing: -1px;
  text-transform: uppercase;
}
.t-display-xxl {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: 126px;
  line-height: 113px;
  letter-spacing: -1px;
  text-transform: uppercase;
}
.t-display-xl {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: 90px;
  line-height: 84px;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* —— Calmer sub-displays: the light 300 voice —— */
.t-display-lg {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: 48px;
  line-height: 52px;
}
.t-display-md {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: 40px;
  line-height: 44px;
}

/* —— Card + micro headings: weight 700 —— */
.t-display-sm {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 32px;
  line-height: 40px;
}
.t-display-xs {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 24px;
  line-height: 24px;
}

/* —— Eyebrow —— */
.t-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
}

/* —— Body —— */
.t-body-lg        { font-size: 22px; line-height: 24px; font-weight: var(--w-reg); }
.t-body-md        { font-size: 18px; line-height: 28px; font-weight: var(--w-reg); }
.t-body-md-strong { font-size: 18px; line-height: 28px; font-weight: var(--w-semi); }
.t-body-sm        { font-size: 16px; line-height: 20px; font-weight: var(--w-reg); }
.t-body-sm-strong { font-size: 16px; line-height: 22px; font-weight: var(--w-bold); }
.t-caption        { font-size: 14px; line-height: 16px; font-weight: var(--w-reg); }
.t-caption-strong { font-size: 14px; line-height: 21px; font-weight: var(--w-bold); }
.t-caption-upper  {
  font-size: 12px; line-height: 16px; font-weight: var(--w-semi);
  letter-spacing: .57px; text-transform: uppercase;
}

/* ============================================================
   PILL / SHAPE HELPERS
   ============================================================ */
.pi-pill   { border-radius: var(--r-pill-lg); }
.pi-chip   { border-radius: var(--r-pill-md); }
.pi-card   { border-radius: var(--r-card); }
.pi-circle { border-radius: var(--r-full); }