/* =========================================================
   IsmaaTechs Blog — Design Tokens
   Palette: editorial green & white, "field journal" concept
   ========================================================= */

:root {
  /* ---- Color: Green scale (subtle, desaturated) ---- */
  --green-950: #0f2a1d;   /* masthead / footer background */
  --green-800: #1b4332;   /* strong heading accent */
  --green-600: #2d6a4f;   /* primary brand green — links, buttons */
  --green-500: #3f7e63;   /* hover state */
  --green-300: #a9cdb9;   /* soft borders, dividers */
  --green-100: #eef5f0;   /* tinted section backgrounds */
  --green-050: #f7fbf8;   /* near-white tint */

  /* ---- Color: Neutrals ---- */
  --white: #ffffff;
  --ink: #1c211d;         /* warm near-black body text */
  --stone: #5c6a60;       /* secondary / meta text (greenish gray) */
  --stone-300: #c9d3cc;   /* hairline rules */
  --stone-100: #e9ede9;

  /* ---- Semantic ---- */
  --color-bg: var(--white);
  --color-bg-tint: var(--green-050);
  --color-text: var(--ink);
  --color-text-muted: var(--stone);
  --color-accent: var(--green-600);
  --color-accent-hover: var(--green-500);
  --color-accent-strong: var(--green-800);
  --color-border: var(--stone-300);
  --color-focus: #1a73e8; /* high-contrast focus ring, distinct from content color */

  /* ---- Typography ---- */
  --font-serif: "Times New Roman", Times, "Liberation Serif", Georgia, serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-base: 1.125rem;  /* 18px — generous body size for readability */
  --fs-md: 1.25rem;     /* 20px */
  --fs-lg: 1.5rem;      /* 24px */
  --fs-xl: 2rem;        /* 32px */
  --fs-2xl: 2.75rem;    /* 44px */
  --fs-3xl: 3.75rem;    /* 60px */

  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.75;

  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Layout ---- */
  --measure: 68ch;          /* article reading measure */
  --container-max: 1240px;
  --radius-sm: 3px;
  --radius-md: 6px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-normal: 250ms;
}

@media (prefers-color-scheme: dark) {
  /* Blog intentionally stays light — premium editorial print feel.
     Reserved for future dark-mode support without restructuring tokens. */
}