/* ============================================================
   SME Tech Hub — Design tokens
   Palette derived from the SME Tech Hub logo:
   charcoal ink, amber/orange, coral red.
   Layout language inspired by the "Tech Company / IT Company"
   Figma template (spacing rhythm, cards, section hierarchy).
   ============================================================ */
:root {
  /* Color — neutrals */
  --ink:        #1f2126;   /* logo charcoal */
  --ink-2:      #2b2e35;
  --ink-3:      #3a3e47;
  --paper:      #ffffff;
  --bg:         #f7f6f4;   /* warm off-white */
  --bg-soft:    #f0eeeb;
  --line:       rgba(31, 33, 38, 0.12);
  --muted:      rgba(31, 33, 38, 0.62);
  --muted-2:    rgba(31, 33, 38, 0.45);

  /* Color — brand accents */
  --orange:      #f2a33c;  /* logo amber */
  --orange-600:  #de8b1c;
  --orange-700:  #b96f10;
  --orange-soft: #fdf1de;
  --red:         #c9564a;  /* logo coral */
  --red-700:     #a03e34;
  --red-soft:    #f9e7e4;

  /* On-dark tints */
  --on-dark:        rgba(255, 255, 255, 0.92);
  --on-dark-muted:  rgba(255, 255, 255, 0.64);
  --on-dark-line:   rgba(255, 255, 255, 0.14);

  /* Typography */
  --font-heading: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Spacing scale (8px rhythm) */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 40px; --s-6: 48px; --s-8: 64px; --s-10: 80px; --s-12: 96px;

  /* Radii */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(31,33,38,.07);
  --shadow-md: 0 8px 24px rgba(31,33,38,.10);
  --shadow-lg: 0 20px 48px rgba(31,33,38,.16);

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