/* Instituto Atlas - design tokens */

:root {
    /* Raw palette */
    --graphite-950: #14171c;
    --graphite-900: #1b2027;
    --graphite-700: #333a42;
    --graphite-500: #5b6570;
    --graphite-300: #c7cdd3;
    --graphite-100: #eef1f3;

    --stone-50: #f1f3f4;
    --stone-100: #e4e8ea;
    --paper: #fbfbfc;

    --accent-600: #c1502d;
    --accent-700: #a63f21;
    --accent-soft: rgba(193, 80, 45, 0.1);
    --accent-line: rgba(193, 80, 45, 0.32);

    /* Semantic layer */
    --surface: var(--stone-50);
    --surface-alt: var(--stone-100);
    --surface-elevated: var(--paper);
    --surface-dark: var(--graphite-950);

    --text-primary: var(--graphite-950);
    --text-secondary: var(--graphite-500);
    --text-on-dark: var(--paper);
    --text-on-dark-soft: rgba(251, 251, 252, 0.7);

    --border: var(--graphite-300);
    --border-on-dark: rgba(251, 251, 252, 0.14);

    --accent: var(--accent-600);
    --accent-solid: var(--accent-700);

    /* Typography */
    --font-display: "Cabinet Grotesk", "Arial", sans-serif;
    --font-body: "Inter Tight", "Segoe UI", sans-serif;

    --text-display: clamp(1.85rem, 3.6vw, 2.75rem);
    --text-h2: clamp(1.9rem, 3.6vw, 2.75rem);
    --text-h3: 1.3rem;
    --text-lead: 1.15rem;
    --text-body: 1rem;
    --text-small: 0.875rem;
    --text-label: 0.72rem;

    /* Spacing (4px grid) */
    --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;

    /* Radius - soft clinic, one scale */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 28px;

    /* Layout */
    --container-max: 1180px;
    --header-height: 72px;
    --concept-banner-h: 1.65rem;

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 0.15s;
    --duration-base: 0.3s;
    --duration-slow: 0.6s;
    --delay-step: 0.06s;

    /* Shadow (tinted to graphite, never pure black) */
    --shadow-soft: 0 12px 32px rgba(20, 23, 28, 0.1);
    --shadow-elevated: 0 20px 48px rgba(20, 23, 28, 0.16);

    /* Icons */
    --icon-stroke: 1.75;

    /* Z-index scale */
    --z-float-cta: 40;
    --z-header: 50;
    --z-mobile-menu: 60;
    --z-skip-link: 100;
}