/*
 * Idesignweb Design Tokens
 * Refined Minimalist Editorial Design System
 * Clean, distraction-free typography, cohesive obsidian palette, hairline borders, and flat modern cards.
 */

:root {
  /* Color Palette - Clean Minimalist Neutral */
  --bg-primary: #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-muted: #F8FAFC;
  --bg-muted-hover: #F1F5F9;
  --bg-sky: #F8FAFC;          /* Clean light neutral card fill */
  --bg-sky-hover: #F1F5F9;
  --bg-dark: #0F172A;         /* Deep slate obsidian */
  --bg-dark-surface: #1E293B;
  --bg-dark-card: #1E293B;

  /* Brand Accents - Clean Obsidian Slate & Refined Blue */
  --color-blue: #0F172A;       /* Dominant text/button slate */
  --color-blue-hover: #1E293B;
  --color-blue-subtle: rgba(15, 23, 42, 0.04);
  --color-accent: #2563EB;     /* Subtle modern blue accent link */
  --color-accent-hover: #1D4ED8;
  --color-green: #0F172A;      /* Primary button matches clean obsidian */
  --color-green-hover: #1E293B;
  --color-green-focus: rgba(15, 23, 42, 0.15);
  
  /* Text System */
  --text-main: #0F172A;        /* Deep slate black for headers */
  --text-body: #64748B;        /* Harmonious slate body text matching subtitle */
  --text-muted: #64748B;       /* Neutral gray */
  --text-dim: #94A3B8;         /* Muted caption gray */
  --text-blue: #0F172A;
  --text-on-dark: #FFFFFF;
  --text-on-dark-muted: #94A3B8;
  --text-on-dark-sky: #E2E8F0;

  /* Borders & Dividers */
  --border-hairline: #E2E8F0;
  --border-subtle: #F1F5F9;
  --border-strong: #CBD5E1;
  --border-dark: rgba(255, 255, 255, 0.1);

  /* Typography - Clean Inter Typography (vinkj.com standard) */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* Type Scale */
  --text-display: clamp(2rem, 4.5vw, 3rem);
  --text-h1: clamp(1.6rem, 3vw, 2.25rem);
  --text-h2: clamp(1.25rem, 2.2vw, 1.75rem);
  --text-h3: 1.15rem;
  --text-h4: 1.05rem;
  --text-body: 1.05rem;
  --text-small: 0.95rem;
  --text-tiny: 0.85rem;

  /* Radii - clean, sleek, consistent */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* Shadows - soft, modern, minimal */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.07);
  --shadow-green: 0 4px 12px rgba(15, 23, 42, 0.15);

  /* Transitions */
  --ease-smooth: cubic-bezier(0.2, 0, 0.2, 1);
  --transition-base: 0.2s var(--ease-smooth);
  --transition-slow: 0.3s var(--ease-smooth);

  /* Layout Spacing */
  --container-max: 1200px;
  --header-height: 64px;
  --space-unit: 8px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
}