/* =========================================================
   Penguin Marketing — Colors & Type
   Grounded · Measurable · Honest · Calm · Quietly Confident
   Pixel-native · HUD-framed · Data-decorative
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Lexend";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Lexend-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Lexend";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Lexend-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Noto Sans Mono";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/NotoSansMono-SemiBold.ttf") format("truetype");
}

:root {
  /* =========================================================
     BRAND COLORS — exact values from brand guide
     ========================================================= */
  --pm-glacier-blue: #0f3fda; /* primary; brand signature */
  --pm-frost-light:  #daf9ff; /* cool page background */
  --pm-ice-current:  #49e3ff; /* bright accent / highlight */
  --pm-polar-mint:   #49ffc3; /* success / positive accent */

  /* Extended neutrals (derived, grounded, low-chroma) */
  --pm-white:        #ffffff;
  --pm-snow:         #f6fcfe; /* softer than frost for large surfaces */
  --pm-mist:         #edf0f4; /* ultra-thin borders — almost invisible */
  --pm-steel:        #aab7c4; /* muted text, disabled */
  --pm-slate:        #54627a; /* secondary text */
  --pm-ink:          #0b1533; /* deep body text (reads as navy, not black) */
  --pm-black:        #050914;

  /* Deeper glacier for hover/press on primary */
  --pm-glacier-deep: #0a2fa8;
  --pm-glacier-darker: #071f78;

  /* =========================================================
     SEMANTIC COLOR TOKENS
     ========================================================= */
  --color-bg:        var(--pm-white);
  --color-bg-muted:  var(--pm-snow);
  --color-bg-frost:  var(--pm-frost-light);
  --color-bg-invert: var(--pm-glacier-blue);

  /* Surfaces: flat brand fills only — no linear/radial colour gradients (see .stitch/DESIGN.md). */

  --color-fg:        var(--pm-ink);      /* primary text */
  --color-fg-muted:  var(--pm-slate);    /* secondary text */
  --color-fg-subtle: var(--pm-steel);    /* tertiary / meta */
  --color-fg-brand:  var(--pm-glacier-blue);
  --color-fg-invert: var(--pm-white);

  --color-border:        var(--pm-mist);       /* ultra-thin, barely visible */
  --color-border-strong: var(--pm-slate);
  --color-border-hud:    rgba(15, 63, 218, 0.18); /* HUD corner brackets */
  --color-border-hud-active: rgba(15, 63, 218, 0.35);

  --color-accent-ice:  var(--pm-ice-current);
  --color-accent-mint: var(--pm-polar-mint);
  --color-accent-frost: var(--pm-frost-light);

  /* Status — derived but palette-consistent */
  --color-success: #0fbf8a;   /* mint pushed darker for AA on white */
  --color-warning: #d98a00;   /* warm to contrast a cool palette */
  --color-danger:  #d7263d;
  --color-info:    var(--pm-glacier-blue);

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  --font-display: "Lexend", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-body:    "Lexend", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono:    "Noto Sans Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — Lexend renders generously, so keep scale disciplined */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  56px;
  --text-5xl:  72px;

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-mono:   0.02em;   /* mono buttons/subheads */

  /* =========================================================
     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;

  /* =========================================================
     RADII — small & consistent. Logotype has soft caps, not big rounds.
     ========================================================= */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* =========================================================
     HUD / CORNER BRACKET SYSTEM
     Corner marks like ┌ ┐ └ ┘ — targeting reticle aesthetic.
     Frames content without boxing it in.
     ========================================================= */
  --hud-corner-size: 14px;       /* length of each corner arm */
  --hud-corner-weight: 1px;      /* stroke width */
  --hud-corner-color: var(--color-border-hud);
  --hud-corner-offset: 0px;      /* inset from element edge */

  /* =========================================================
     PIXEL GRID — decorative data motif
     ========================================================= */
  --pixel-unit: 4px;  /* base pixel for decorative grids */
  --pixel-color: rgba(15, 63, 218, 0.07);
  --pixel-color-accent: rgba(15, 63, 218, 0.14);

  /* =========================================================
     SHADOWS — restrained, cool-tinted
     ========================================================= */
  --shadow-xs: 0 1px 2px rgba(11, 21, 51, 0.04);
  --shadow-sm: 0 1px 3px rgba(11, 21, 51, 0.05);
  --shadow-md: 0 4px 8px rgba(11, 21, 51, 0.06);
  --shadow-lg: 0 10px 24px rgba(11, 21, 51, 0.08);
  --shadow-focus: 0 0 0 1.5px rgba(15, 63, 218, 0.55);

  /* =========================================================
     MOTION — calm, purposeful (no bounces)
     ========================================================= */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-quick: 120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   Mono is reserved for: subheadings, eyebrows, buttons, labels, numbers, code.
   Lexend-medium is for display. Lexend-regular is for body.
   ========================================================= */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  margin: 0;
}

/* MONO subheadings & eyebrows — the signature move */
.eyebrow, .subhead {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-fg-brand);
}

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-fg);
  margin: 0 0 var(--space-4);
}
.lead {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--color-fg-muted);
}
.meta, small {
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.95em;
  letter-spacing: var(--tracking-mono);
}
code {
  background: var(--pm-frost-light);
  color: var(--pm-glacier-deep);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

a {
  color: var(--color-fg-brand);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--dur-quick) var(--ease-standard);
}
a:hover { color: var(--pm-glacier-deep); }

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

/* =========================================================
   HUD CORNER BRACKETS — ┌ ┐ └ ┘
   Apply .hud-frame to any container. Uses pseudo-elements
   on a wrapper to draw corner marks without full borders.
   For cards: .hud-card gives corners + ultra-thin border.
   ========================================================= */

/*
  .hud-frame draws four corner brackets via a single element
  using a layered background-image of linear-gradients.
  Each gradient is a 1px line positioned at a corner.
*/
.hud-frame {
  position: relative;
}
.hud-frame::before,
.hud-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
/* Top-left ┌ and top-right ┐ */
.hud-frame::before {
  top: var(--hud-corner-offset);
  left: var(--hud-corner-offset);
  right: var(--hud-corner-offset);
  height: var(--hud-corner-size);
  border-top: var(--hud-corner-weight) solid var(--hud-corner-color);
  border-left: var(--hud-corner-weight) solid var(--hud-corner-color);
  border-right: var(--hud-corner-weight) solid var(--hud-corner-color);
  border-bottom: none;
  /* Clip to only show corner arms */
  clip-path: polygon(
    0 0, var(--hud-corner-size) 0, var(--hud-corner-size) var(--hud-corner-weight),
    var(--hud-corner-weight) var(--hud-corner-weight), var(--hud-corner-weight) 100%, 0 100%,
    0 0,
    calc(100% - var(--hud-corner-size)) 0, calc(100% - var(--hud-corner-size)) var(--hud-corner-weight),
    calc(100% - var(--hud-corner-weight)) var(--hud-corner-weight), calc(100% - var(--hud-corner-weight)) 100%, 100% 100%,
    100% 0
  );
}
/* Bottom-left └ and bottom-right ┘ */
.hud-frame::after {
  bottom: var(--hud-corner-offset);
  left: var(--hud-corner-offset);
  right: var(--hud-corner-offset);
  height: var(--hud-corner-size);
  border-bottom: var(--hud-corner-weight) solid var(--hud-corner-color);
  border-left: var(--hud-corner-weight) solid var(--hud-corner-color);
  border-right: var(--hud-corner-weight) solid var(--hud-corner-color);
  border-top: none;
  clip-path: polygon(
    0 100%, var(--hud-corner-size) 100%, var(--hud-corner-size) calc(100% - var(--hud-corner-weight)),
    var(--hud-corner-weight) calc(100% - var(--hud-corner-weight)), var(--hud-corner-weight) 0, 0 0,
    0 100%,
    calc(100% - var(--hud-corner-size)) 100%, calc(100% - var(--hud-corner-size)) calc(100% - var(--hud-corner-weight)),
    calc(100% - var(--hud-corner-weight)) calc(100% - var(--hud-corner-weight)), calc(100% - var(--hud-corner-weight)) 0, 100% 0,
    100% 100%
  );
}

/* No hover effect on corners — static framing */

/* Size variants */
.hud-frame--lg { --hud-corner-size: 20px; }
.hud-frame--sm { --hud-corner-size: 10px; }

/* Brand-colored corners */
.hud-frame--glacier { --hud-corner-color: var(--pm-glacier-blue); }
.hud-frame--ice { --hud-corner-color: var(--pm-ice-current); }
.hud-frame--mint { --hud-corner-color: var(--pm-polar-mint); }

/* =========================================================
   CARD — ultra-thin border + optional HUD corners
   ========================================================= */
.pm-card {
  background: var(--pm-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.pm-card:hover {
  border-color: rgba(11, 21, 51, 0.12);
  box-shadow: var(--shadow-sm);
}

/* =========================================================
   PIXEL GRID BACKGROUND — decorative data motif
   Subtle 4px grid dots for section backgrounds.
   ========================================================= */
.pixel-grid-bg {
  background-image:
    radial-gradient(circle, var(--pixel-color) 0.5px, transparent 0.5px);
  background-size: var(--pixel-unit) var(--pixel-unit);
}
.pixel-grid-bg--accent {
  background-image:
    radial-gradient(circle, var(--pixel-color-accent) 0.5px, transparent 0.5px);
}

/* Utility focus ring — apply to interactive elements */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}