/* Grayskills web — design tokens (from Figma "GraySkills" › Landing, node 3:23)
   Load the fonts first:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500&family=Geist+Mono:wght@500&family=IBM+Plex+Serif:wght@400&family=Gentium+Plus:wght@700&display=swap" rel="stylesheet">
*/
:root {
  /* surfaces */
  --bg: #100F0F;            /* page */
  --surface: #1D1B1B;       /* cards, FAQ answer, pricing card */
  --surface-2: #2F2D2D;     /* tags, step chips */
  --line: #4E4E4E;          /* tag + pill borders */
  --hair: rgba(255,255,255,.08); /* dividers */
  --logo-tile: #262424;

  /* text */
  --ink: #FFFFFF;
  --ink-90: rgba(255,255,255,.9);
  --ink-80: rgba(255,255,255,.8);
  --ink-70: rgba(255,255,255,.7);
  --ink-60: rgba(255,255,255,.6);
  --ink-40: rgba(255,255,255,.4);
  --on-accent: #100F0F;

  /* accent — ONE yellow, used for the primary CTA and the logo dot only */
  --yellow: #FFDA0A;
  --strike: #E94040;        /* hand-drawn price strike */

  /* category card colours (also used for stat cards) */
  --c-olive: #C7C351;   /* Mobile App */
  --c-coral: #EB6C49;   /* Website */
  --c-green: #87D75B;   /* Slide Deck */
  --c-cyan: #3CC7D9;    /* Web Component */
  --c-lilac: #AA8DFA;   /* Social Media */
  --c-sand: #BDAC91;    /* Illustration / team stat */
  --c-sage: #96A785;    /* Web App / components stat */
  --c-sky: #3CA2D9;     /* customers stat */
  --c-violet: #5F46ED;  /* templates stat */
  --c-plum: #533434;    /* popshot tile */

  /* fonts */
  --f-serif: "IBM Plex Serif", Georgia, serif;
  --f-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, monospace;
  --f-card: "Gentium Plus", Georgia, serif;

  /* motion — one easing family for the whole site */
  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* reveals, slides */
  --ease-spring: cubic-bezier(.34, 1.45, .5, 1); /* landings with a tiny overshoot */
  --ease-io: cubic-bezier(.65, 0, .35, 1);       /* drawn lines */

  /* radii */
  --r-card: 20px;
  --r-tile: 16px;
  --r-chip: 8px;
  --r-pill: 48px;
  --r-btn: 40px;

  /* layout */
  --w-page: 1600px;
  --w-wide: 1512px;   /* 4-up skill grid */
  --w-main: 1218px;   /* 3-up cards */
  --w-text: 1009px;   /* hero headline */
  --w-narrow: 600px;  /* FAQ, legal */
  --gutter: 50px;
  --sec-gap: 150px;   /* between landing sections */
  --head-gap: 56px;   /* section head → content */
}

/* ---- text styles (Figma) ---- */
.t-display { font: 400 88px/0.94 var(--f-serif); letter-spacing: -4px; }
.t-h2      { font: 400 58px/1.2 var(--f-serif); letter-spacing: -4px; }
.t-stat    { font: 400 58px/1.2 var(--f-serif); letter-spacing: -4px; }
.t-lead    { font: 400 22px/1.3 var(--f-sans); }
.t-statement { font: 400 36px/1.2 var(--f-sans); letter-spacing: -1.44px; }
.t-sub     { font: 400 18px/1.5 var(--f-sans); }
.t-body    { font: 300 16px/1.7 var(--f-sans); }
.t-ui      { font: 400 16px/1.3 var(--f-sans); }
.t-small   { font: 400 14px/1.5 var(--f-sans); }
.t-cap     { font: 500 11px/1.3 var(--f-sans); letter-spacing: .33px; text-transform: uppercase; }
.t-card    { font: 700 33px/1.1 var(--f-card); letter-spacing: -2px; }

@media (max-width: 1024px) {
  .t-display { font-size: 64px; letter-spacing: -3px; }
  .t-h2 { font-size: 46px; letter-spacing: -2.6px; }
  .t-statement { font-size: 30px; letter-spacing: -1.1px; }
}
@media (max-width: 640px) {
  .t-display { font-size: 44px; line-height: 1; letter-spacing: -1.8px; }
  .t-h2 { font-size: 36px; letter-spacing: -1.6px; }
  .t-stat { font-size: 46px; letter-spacing: -2.6px; }
  .t-lead { font-size: 18px; }
  .t-statement { font-size: 24px; letter-spacing: -.8px; }
  .t-sub { font-size: 16px; }
}