/* ============================================================================
   Design Tokens — DevUtilsNow.com
   Single source of visual truth (PRD §9, UX/UI §2-4). Every color, space,
   radius and font size used across the site maps back to a token here so all
   15 tool pages stay visually identical without a component framework.
   ========================================================================= */

:root {
  /* --- Brand & primary ---------------------------------------------------- */
  --color-primary: #2563EB;        /* links, primary buttons, active nav */
  --color-primary-hover: #1D4ED8;
  --color-primary-dark: #1E3A8A;   /* header/footer navy */
  --color-primary-contrast: #FFFFFF;
  --color-primary-soft: #EFF4FF;   /* tinted backgrounds, active chips */

  /* --- Category accents (wayfinding, UX/UI §2) --------------------------- */
  --color-cat-formatters: #22C55E; /* green  */
  --color-cat-encoding: #3B82F6;   /* blue (category default) */
  --color-cat-code: #8B5CF6;       /* purple */

  /* --- Semantic ---------------------------------------------------------- */
  --color-success: #16A34A;
  --color-success-soft: #DCFCE7;
  --color-warning: #D97706;
  --color-warning-soft: #FEF3C7;
  --color-error: #DC2626;
  --color-error-soft: #FEE2E2;

  /* --- Surfaces & text --------------------------------------------------- */
  --color-bg: #F8FAFC;             /* page background, off-white */
  --color-surface: #FFFFFF;        /* cards, panels */
  --color-surface-alt: #F1F5F9;    /* code panes, subtle fills */
  --color-border: #E2E8F0;         /* dividers, input & card outlines */
  --color-border-strong: #CBD5E1;
  --color-text: #0F172A;           /* primary text */
  --color-text-muted: #475569;     /* secondary text */
  --color-text-subtle: #94A3B8;    /* meta, placeholders */
  --color-text-on-dark: #E2E8F0;   /* text on navy header/footer */
  --color-text-on-dark-muted: #94A3B8;

  /* --- Radius ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* --- Spacing scale (4/8/16/24/32/48, UX/UI §4) ------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  /* --- Typography -------------------------------------------------------- */
  --font-body: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-heading: var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Modular type scale (UX/UI §3) */
  --font-size-xs: 0.75rem;   /* 12 */
  --font-size-sm: 0.875rem;  /* 14 */
  --font-size-base: 1rem;    /* 16 */
  --font-size-md: 1.125rem;  /* 18 */
  --font-size-lg: 1.5rem;    /* 24 */
  --font-size-xl: 2rem;      /* 32 */
  --font-size-2xl: 2.5rem;   /* 40 */

  --line-tight: 1.2;
  --line-snug: 1.4;
  --line-normal: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Icon sizes -------------------------------------------------------- */
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 40px;   /* tool hero / card icon tile */

  /* --- Elevation & effects ---------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --ring-focus: 0 0 0 3px rgba(37, 99, 235, 0.35);

  /* --- Layout ------------------------------------------------------------ */
  --container-max: 1200px;

  --transition-fast: 120ms ease;
  --transition: 180ms ease;
}