/*
 * ANFAR CONSULTING — DESIGN SYSTEM
 * Token system: color, type, spacing, radius, motion.
 * Dark corporate palette — near-black surfaces (main/secondary/card/footer
 * tiers) with a single green accent used for links, focus states, buttons
 * and small marks/icon highlights.
 */

:root {
    /* ---- Color: surfaces ---- */
    --bg-page: #1A1F27;         /* main background — page canvas */
    --ink-800: #202632;         /* secondary background — alternating sections */
    --paper: #252C39;           /* card / elevated surface */
    --footer-bg: #0E1218;       /* footer background — darkest tier */
    --navbar-bg: rgba(17, 21, 28, 0.75); /* navbar background once scrolled */
    --mist-50: #2A3140;         /* icon chips, subtle fills on dark */
    --line-200: #323B48;        /* hairline borders */
    --line-200-dark: #323B48;   /* kept as alias — theme no longer distinguishes on-dark borders */
    --ink-700: #323B48;         /* unused legacy token — aliased to border */

    /* ---- Color: text ---- */
    --ink-950: #F3F4F6;         /* primary text / headings */
    --slate-600: #D1D5DB;       /* secondary text / body copy */
    --slate-400: #9CA3AF;       /* muted / tertiary text */
    --fog-400: #D1D5DB;         /* kept as alias — same as secondary text now the whole site is dark */
    --fog-300: #9CA3AF;         /* kept as alias — same as muted text now the whole site is dark */
    --on-accent: #0E1218;       /* text color used on top of green accent surfaces (buttons, active pills) */

    /* ---- Color: signature accent ---- */
    --blueprint-700: #15803D;   /* deepest accent, small text-only use */
    --blueprint-600: #16A34A;   /* accent — links, focus ring, ticks, icons, primary buttons */
    --blueprint-400: #22C55E;   /* accent hover — brighter green for hover states */
    --blueprint-tint: rgba(22, 163, 74, 0.16);  /* faint fills on dark surfaces */
    --color-success: #16A34A;  /* form success state only */

    /* ---- Typography ---- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --text-h1: clamp(2.875rem, 2.2rem + 3.1vw, 4.75rem);
    --text-h2: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem);
    --text-h3: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
    --text-h4: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
    --text-lg: clamp(1.125rem, 1.05rem + 0.32vw, 1.25rem);
    --text-body: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);
    --text-sm: 0.9375rem;
    --text-xs: 0.8125rem;
    --text-micro: 0.75rem;

    --lh-tight: 1.14;
    --lh-snug: 1.4;
    --lh-body: 1.75;

    --tracking-tight: -0.02em;
    --tracking-wide: 0.06em;
    --tracking-widest: 0.16em;

    /* ---- Spacing scale ---- */
    --sp-1: 0.5rem;   /* 8  */
    --sp-2: 1rem;     /* 16 */
    --sp-3: 1.5rem;   /* 24 */
    --sp-4: 2rem;     /* 32 */
    --sp-5: 3.25rem;  /* 52 */
    --sp-6: 4.5rem;   /* 72 */
    --sp-7: 6.5rem;   /* 104 */
    --sp-8: 9rem;     /* 144 */

    --section-py: clamp(6.5rem, 5.6rem + 4.2vw, 9.5rem);
    --container-px: clamp(1.5rem, 1rem + 2.5vw, 4rem);
    --container-max: 1440px;
    --content-max: 1280px;

    /* ---- Radius ---- */
    --radius-lg: 16px;   /* cards, panels, imagery */
    --radius-md: 10px;
    --radius-sm: 8px;    /* buttons, inputs, tags */

    /* ---- Elevation & motion ---- */
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.24), 0 12px 28px -14px rgba(0, 0, 0, 0.5);
    --shadow-card-hover: 0 4px 10px rgba(0, 0, 0, 0.3), 0 28px 48px -16px rgba(0, 0, 0, 0.6);
    --shadow-elevated: 0 30px 60px -20px rgba(0, 0, 0, 0.7);

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 200ms;
    --dur-base: 400ms;
    --dur-slow: 700ms;
}