/* ======================================================================
   Poley Creative — Colors & Type
   Extracted from the Figma "Design-v1.0" and "New" pages.
   ====================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Gellix";
  src: url("fonts/Gellix-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gellix";
  src: url("fonts/Gellix-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gellix";
  src: url("fonts/Gellix-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gellix";
  src: url("fonts/Gellix-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gellix";
  src: url("fonts/Gellix-SemiBoldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gellix";
  src: url("fonts/Gellix-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gellix";
  src: url("fonts/Gellix-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gellix";
  src: url("fonts/Gellix-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gellix";
  src: url("fonts/Gellix-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tobias";
  src: url("fonts/Tobias-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tobias";
  src: url("fonts/Tobias-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Tobias";
  src: url("fonts/Tobias-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tobias";
  src: url("fonts/Tobias-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Tobias";
  src: url("fonts/Tobias-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tobias";
  src: url("fonts/Tobias-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tobias";
  src: url("fonts/Tobias-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tobias";
  src: url("fonts/Tobias-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* --- Brand primaries (from Figma usage counts) --- */
  --pc-pink:        #F0A0FF;   /* rgb(240,160,255) — primary accent / CTA fill */
  --pc-pink-deep:   #C46FD4;   /* rgb(196,111,212) — moodboard / secondary pink */
  --pc-yellow:      #FEE01C;   /* rgb(254,224,28)  — Twilio card fill, logo "circle" */
  --pc-blue:        #81A2FF;   /* rgb(129,162,255) — Circle card fill, about hero */
  --pc-orange:      #EC9E1D;   /* rgb(236,158,29)  — accent wedge on yellow */
  --pc-olive:       #484532;   /* rgb(72,69,50)    — partner logo tint */

  /* --- Neutrals --- */
  --pc-ink:         #000000;   /* rgb(0,0,0)       — body text, borders */
  --pc-ink-soft:    #1D1D1D;   /* rgb(29,29,29)    — mega fill (footer, video-card) */
  --pc-graphite:    #373735;   /* rgb(55,55,53)    — deep neutral */
  --pc-white:       #FFFFFF;   /* rgb(255,255,255) — surfaces */
  --pc-bg:          #F3F3F3;   /* rgb(243,243,243) — page background */
  --pc-rule:        #D9D9D9;   /* rgb(217,217,217) — hairlines */
  --pc-mute:        #A4A7AE;   /* rgb(164,167,174) — muted strokes */
  --pc-navy:        #0B132B;   /* rgb(11,19,43)    — sparingly used on hero doodle */
  --pc-slate:       #181D27;   /* rgb(24,29,39)    — rare text */
  --pc-slate-soft:  #535862;   /* rgb(83,88,98)    — meta text */

  /* --- Semantic fg/bg --- */
  --fg-1:           var(--pc-ink);            /* default text */
  --fg-2:           var(--pc-slate-soft);     /* secondary text, meta */
  --fg-inverse:     var(--pc-white);
  --fg-muted:       var(--pc-mute);

  --bg-page:        var(--pc-bg);             /* default page */
  --bg-surface:     var(--pc-white);          /* cards, nav bar */
  --bg-inverse:     var(--pc-ink-soft);       /* footer, dark blocks */
  --bg-accent:      var(--pc-pink);           /* CTA pill fill */
  --bg-accent-warm: var(--pc-yellow);
  --bg-accent-cool: var(--pc-blue);

  --border-default: var(--pc-ink);
  --border-dashed:  var(--pc-ink);            /* dashed rule throughout */
  --border-muted:   var(--pc-rule);

  /* --- Radii --- */
  --radius-sm:    8px;
  --radius-md:    10px;
  --radius-lg:    20px;
  --radius-xl:    40px;
  --radius-pill:  999px;

  /* --- Spacing scale (8pt 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;

  /* --- Layout --- */
  --container-max: 1440px;
  --content-max:   1216px;     /* 1440 - 2×112 gutter from Figma */
  --gutter:        112px;
  --gutter-mobile: 24px;

  /* --- Elevation (minimal — the system leans flat) --- */
  --shadow-none:   none;
  --shadow-card:   0 1px 0 rgba(0,0,0,0.04);
  --shadow-pop:    0 12px 32px -12px rgba(0,0,0,0.16);

  /* --- Motion --- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      150ms;
  --dur-med:       240ms;
  --dur-slow:      420ms;

  /* --- Type families --- */
  --font-display:  "Gellix", "Inter", system-ui, sans-serif;   /* headlines, buttons */
  --font-serif:    "Tobias", "Cormorant Garamond", Georgia, serif;  /* body, italics */
  --font-mono:     ui-monospace, "JetBrains Mono", Menlo, monospace;

  /* --- Type scale (px, desktop) --- */
  --fs-display-xl: 84px;   /* hero — "Technical stories, visually told" */
  --fs-display-lg: 64px;
  --fs-display-md: 50px;
  --fs-h1:         48px;
  --fs-h2:         36px;
  --fs-h3:         26px;
  --fs-h4:         22px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;

  --lh-tight:      1.0;    /* display uses 100% line-height */
  --lh-display:    1.1;    /* 110% for hero */
  --lh-snug:       1.25;
  --lh-body:       1.5;    /* Tobias body copy */
}

/* ---------- Semantic element defaults ---------- */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-display-xl); font-weight: 700; line-height: var(--lh-display); }
h2 { font-size: var(--fs-h1);         font-weight: 700; line-height: var(--lh-tight);   }
h3 { font-size: var(--fs-h2);         font-weight: 700; line-height: var(--lh-tight);   }
h4 { font-size: var(--fs-h4);         font-weight: 700; line-height: var(--lh-tight);   }

/* Hero convention: italic word inside a bold sans headline (Gellix Italic). */
.pc-italic { font-family: var(--font-display); font-style: italic; font-weight: 700; }

/* Body — Tobias Light @ 16/1.5 is the workhorse. */
p, .pc-body {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0;
}

.pc-body-lg {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

/* Eyebrow / nav — Tobias Medium at 16/100%. Nav links use Tobias Bold @ 18. */
.pc-eyebrow {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1;
  letter-spacing: 0.01em;
}

.pc-nav-link {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--fs-body-lg);
  line-height: 1;
  color: var(--fg-1);
  text-decoration: none;
}

/* Section title convention: "Our Capabilities" — Gellix Bold, italic second word. */
.pc-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1;
  text-align: center;
}

/* Big numbered step labels ("01", "02") — Gellix Medium, pink. */
.pc-step-number {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 48px;
  color: var(--pc-pink);
  line-height: 1;
}

/* Metric big-number ("+240%") — Gellix Bold @ 36. */
.pc-metric {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1;
}

code, pre, .pc-mono {
  font-family: var(--font-mono);
  font-size: 14px;
}