/* ============================================================
   SoftwarePedia — Design Tokens
   Single source of truth: colors, type, spacing, radii, shadows.
   ============================================================ */

:root {
  /* ---- Brand: orange ramp -------------------------------- */
  --brand-50:  #FFF4EC;
  --brand-100: #FFE5D2;
  --brand-200: #FFC9A4;
  --brand-300: #FFA968;
  --brand-400: #FF8B3D;
  --brand-500: #FF6A13;   /* primary */
  --brand-600: #ED5606;
  --brand-700: #C24304;
  --brand-800: #8F3208;
  --brand-900: #5E230B;

  --amber:     #F49E1A;   /* secondary accent (logo top) */
  --amber-soft:#FFB64A;

  /* ---- Ink / warm neutrals ------------------------------- */
  --ink-900: #15171C;   /* display headings */
  --ink-800: #1E2128;
  --ink-700: #2B2F38;   /* strong body */
  --ink-600: #474C58;   /* body */
  --ink-500: #6A6F7B;   /* muted */
  --ink-400: #969BA6;   /* faint */
  --ink-300: #C2C5CC;

  /* ---- Surfaces ------------------------------------------ */
  --bg:        #FFFFFF;
  --bg-soft:   #FAF8F4;   /* warm paper */
  --bg-soft-2: #F3F0EA;
  --bg-tint:   #FFF6EE;   /* faint orange wash */
  --surface-dark:   #14161B;
  --surface-dark-2: #1C1F27;

  /* ---- Lines --------------------------------------------- */
  --line:      #EBE7E0;   /* warm hairline */
  --line-2:    #E0DBD2;
  --line-dark: #2A2E37;

  /* ---- Semantic ------------------------------------------ */
  --text:        var(--ink-700);
  --text-strong: var(--ink-900);
  --text-muted:  var(--ink-500);
  --accent:      var(--brand-500);
  --accent-ink:  var(--brand-700);

  /* ---- Type families ------------------------------------- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Type scale (fluid) -------------------------------- */
  --fs-eyebrow: 0.8125rem;   /* 13px */
  --fs-sm:   0.875rem;       /* 14 */
  --fs-base: 1.0625rem;      /* 17 */
  --fs-md:   1.1875rem;      /* 19 */
  --fs-lg:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-xl:   clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --fs-2xl:  clamp(1.95rem, 1.5rem + 2vw, 2.85rem);
  --fs-3xl:  clamp(2.5rem, 1.8rem + 3.4vw, 4rem);
  --fs-4xl:  clamp(3rem, 2rem + 5vw, 5.25rem);

  --lh-tight: 1.06;
  --lh-snug: 1.18;
  --lh-body: 1.68;

  /* ---- Spacing (4px base) -------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 2.75rem; --sp-8: 3.5rem;
  --sp-9: 4.5rem;   --sp-10: 6rem;   --sp-12: 8rem;

  --container: 1240px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Radii --------------------------------------------- */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Shadows (soft, layered) --------------------------- */
  --sh-xs: 0 1px 2px rgba(21,23,28,.06);
  --sh-sm: 0 2px 6px rgba(21,23,28,.07), 0 1px 2px rgba(21,23,28,.05);
  --sh-md: 0 12px 28px -12px rgba(21,23,28,.16), 0 2px 6px rgba(21,23,28,.05);
  --sh-lg: 0 30px 60px -22px rgba(21,23,28,.28), 0 6px 14px -8px rgba(21,23,28,.12);
  --sh-brand: 0 16px 34px -14px rgba(255,106,19,.55);

  /* ---- Motion -------------------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .28s;

  /* ---- Hexagon clip (brand motif) ------------------------ */
  --hex: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}