/* ============================================================
   tokens.css — design tokens pulled from Figma
   "The Skill Office" — 1440w light / 1440w dark
   Colors map Figma's two theme frames to one set of CSS
   custom properties: :root = light, [data-theme="dark"] = dark.
   Type / spacing / radii values are shared across both themes.
   ============================================================ */

:root {
  /* ---- Font families (Figma: Font 1 / 2 / 3) ---- */
  --font-1: "Geist", system-ui, -apple-system, sans-serif; /* primary */
  --font-2: "Manrope", system-ui, sans-serif;              /* Font 2 */
  --font-3: "Inter", system-ui, sans-serif;                /* Font 3 */

  /* ---- Font weights ---- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---- Font sizes ---- */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-80: 80px;
  --fs-93: 93px;

  /* ---- Line heights ---- */
  --lh-14: 14px;
  --lh-15-6: 15.6px;
  --lh-16-8: 16.8px;
  --lh-18: 18px;
  --lh-18-2: 18.2px;
  --lh-19-5: 19.5px;
  --lh-21: 21px;
  --lh-22-4: 22.4px;
  --lh-32: 32px;
  --lh-35-2: 35.2px;
  --lh-44: 44px;
  --lh-102-34: 102.34px;
  --lh-104: 104px;

  /* ---- Letter spacing ---- */
  --ls-024: -0.24px;
  --ls-028: -0.28px;
  --ls-03: -0.3px;
  --ls-04: -0.4px;
  --ls-042: -0.42px;
  --ls-048: -0.48px;
  --ls-056: -0.56px;
  --ls-064: -0.64px;
  --ls-128: -1.28px;
  --ls-16: -1.6px;
  --ls-372: -3.7219px;

  /* ---- Radii ---- */
  --r-4: 4px;
  --r-8: 8px;
  --r-16: 16px;
  --r-50: 50px;
  --r-64: 64px;
  --r-100: 100px;
  --r-300: 300px;

  /* ---- Spacing (Figma item-spacing scale) ---- */
  --sp-xs: 8px;
  --sp-s: 16px;
  --sp-sp: 24px;   /* s+ */
  --sp-40: 40px;
  --sp-xl: 64px;
  --sp-125: 125px;

  /* ---- Layout ---- */
  --container: 1296px;
  --frame: 1440px;
  --header-h: 60px;

  /* ============================================================
     THEME COLOURS — LIGHT (Figma "1440w light")
     ============================================================ */
  --bg: #f4f2f0;                       /* Pampas — page background        */
  --fg: #151515;                       /* Cod Gray — primary text         */
  --surface: #ffffff;                  /* White — content cards           */
  --surface-2: #ebebeb;                /* Gallery — inputs / chips / soc. */
  --text-muted: rgba(135, 135, 135, 0.8); /* Gray 80% — muted body        */
  --text-subtle: #969696;              /* Dusty Gray — card subtitles     */

  --btn-bg: #151515;                   /* Cod Gray — primary button bg    */
  --btn-fg: #f4f2f0;                   /* Pampas — primary button fg      */

  --badge-bg: rgba(48, 48, 48, 0.15);  /* Mine Shaft 14.9% — image pills  */
  --badge-fg: #ffffff;                 /* White — text on image pills     */

  --pill-white-bg: #ffffff;            /* fixed white pill (See how it…)  */
  --pill-white-fg: #000000;            /* fixed black text on white pill  */

  --header-bg: rgba(255, 255, 255, 0.4); /* White 40% — sticky header      */
  --ring: var(--bg);                   /* avatar ring = page bg           */

  --border-soft: rgba(255, 255, 255, 0.1);   /* White 10% */
  --border-15: rgba(255, 255, 255, 0.15);     /* White 14.9% */
  --hairline: rgba(21, 21, 21, 0.1);          /* visible divider (footer) */

  --accent-yellow: #ffdf5f;            /* Dandelion (decorative, hidden)  */
  --accent-orange: #e08a3c;            /* light orange accent (tuned for light bg) */

  color-scheme: light;
}

/* ============================================================
   THEME COLOURS — DARK (Figma "1440w dark")
   ============================================================ */
[data-theme="dark"] {
  --bg: #050505;                       /* grey/2 Black — page background  */
  --fg: #f4f2f0;                       /* Pampas — primary text           */
  --surface: #000000;                  /* Black — content cards           */
  --surface-2: #151515;                /* Cod Gray — inputs / chips / soc */
  --text-muted: rgba(255, 255, 255, 0.6);  /* White 60% — muted body      */
  --text-subtle: #969696;              /* Dusty Gray — card subtitles     */

  --btn-bg: #f4f2f0;                   /* Pampas — primary button bg      */
  --btn-fg: #151515;                   /* Cod Gray — primary button fg    */

  --badge-bg: rgba(194, 194, 194, 0.15); /* Silver 15% — image pills      */
  --badge-fg: #ffffff;                 /* White — text on image pills     */

  --pill-white-bg: #ffffff;
  --pill-white-fg: #000000;

  --header-bg: rgba(0, 0, 0, 0.7);     /* Black 70% — sticky header       */

  --border-soft: rgba(255, 255, 255, 0.1);
  --border-15: rgba(255, 255, 255, 0.15);
  --hairline: rgba(255, 255, 255, 0.12);
  --accent-orange: #f6b07c;            /* light orange accent (lighter for dark bg) */

  color-scheme: dark;
}