/*
 * tokens.css — DS v1.1 Custom Properties
 * Appmax Blog child theme
 * Single source of truth for all design decisions.
 * Load order: first — all subsequent sheets consume these vars.
 */

:root {

    /* ── Color Scale ──────────────────────────────────────────── */

    /* Purple scale */
    --purple:        #7B40E8;
    --purple-light:  #A888F4;
    --purple-soft:   #F7F3FF;
    --purple-deep:   #45337C;
    --purple-900:    #131326;

    /* Neutrals */
    --white:         #FFFFFF;
    --neutral-50:    #F9FAFB;
    --neutral-100:   #F3F4F6;
    --neutral-200:   #E5E7EB;
    --neutral-300:   #D1D5DB;
    --neutral-400:   #9CA3AF;
    --neutral-600:   #4B5563;
    --neutral-700:   #374151;
    --neutral-900:   #111827;

    /* Accent */
    --green:         #10B981;
    --amber:         #F59E0B;
    --red:           #EF4444;

    /* ── Semantic Aliases ─────────────────────────────────────── */

    --color-bg:          var(--white);
    --color-bg-alt:      var(--neutral-50);
    --color-surface:     var(--white);
    --color-border:      var(--neutral-200);
    --color-border-subtle: var(--neutral-100);

    --color-text:        var(--neutral-900);
    --color-text-muted:  var(--neutral-600);
    --color-text-faint:  var(--neutral-400);

    --color-accent:      var(--purple);
    --color-accent-light: var(--purple-light);
    --color-accent-soft: var(--purple-soft);

    --color-footer-bg:   var(--purple-900);

    /* ── Gradients — DS v1.1 ──────────────────────────────────── */

    /* G1: hero pillar, card premium, CTA close, cross-promo appmax */
    --g1: linear-gradient(135deg, #F7F3FF 0%, #A888F4 40%, #45337C 75%, #131326 100%);

    /* G2: editoria hub manifesto */
    --g2: linear-gradient(135deg, #45337C 0%, #A888F4 40%, #45337C 70%, #131326 100%);

    /* G3: newsletter + primary button */
    --g3: linear-gradient(135deg, #9B6AFA 0%, #131326 100%);

    /* ── Typography ───────────────────────────────────────────── */

    --font-sans:   'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:   'DM Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

    /* Type scale */
    --text-xs:   0.75rem;    /*  12px */
    --text-sm:   0.875rem;   /*  14px */
    --text-base: 1rem;       /*  16px */
    --text-lg:   1.125rem;   /*  18px */
    --text-xl:   1.25rem;    /*  20px */
    --text-2xl:  1.5rem;     /*  24px */
    --text-3xl:  1.875rem;   /*  30px */
    --text-4xl:  2.25rem;    /*  36px */

    /* Fluid type — hero headline */
    --text-hero-pillar:  clamp(2.75rem, 6vw, 5rem);    /* 44px → 80px */
    --text-hero-cluster: clamp(2.25rem, 4.5vw, 3.75rem); /* 36px → 60px */

    /* Line heights */
    --leading-tight:  1.2;
    --leading-snug:   1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose:  2;

    /* Font weights */
    --weight-regular: 400;
    --weight-medium:  500;
    --weight-semibold: 600;
    --weight-bold:    700;

    /* Letter spacing */
    --tracking-tight:  -0.025em;
    --tracking-normal:  0em;
    --tracking-wide:    0.025em;
    --tracking-widest:  0.1em;

    /* ── Spacing — 8-point grid ───────────────────────────────── */

    --space-1:   0.5rem;    /*  8px */
    --space-2:   1rem;      /* 16px */
    --space-3:   1.5rem;    /* 24px */
    --space-4:   2rem;      /* 32px */
    --space-5:   2.5rem;    /* 40px */
    --space-6:   3rem;      /* 48px */
    --space-8:   4rem;      /* 64px */
    --space-10:  5rem;      /* 80px */
    --space-12:  6rem;      /* 96px */
    --space-16:  8rem;      /* 128px */

    /* ── Radii ────────────────────────────────────────────────── */

    --radius-sm:   0.25rem;  /*  4px */
    --radius-md:   0.5rem;   /*  8px */
    --radius-lg:   0.75rem;  /* 12px */
    --radius-xl:   1rem;     /* 16px */
    --radius-2xl:  1.5rem;   /* 24px */
    --radius-full: 9999px;

    /* ── Shadows ──────────────────────────────────────────────── */

    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.05);
    --shadow-purple: 0 4px 16px rgba(123, 64, 232, 0.20);

    /* ── Transitions ──────────────────────────────────────────── */

    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   400ms ease;

    /* ── Layout ───────────────────────────────────────────────── */

    --container-max:     1200px;
    --content-max:       720px;
    --sidebar-width:     300px;
    --nav-height:        80px;
    --progress-bar-h:    3px;
    --sidebar-sticky-top: calc(var(--nav-height) + var(--progress-bar-h) + var(--space-2));

    /* ── Z-index scale ────────────────────────────────────────── */

    --z-base:     1;
    --z-raised:   10;
    --z-overlay:  100;
    --z-nav:      200;
    --z-progress: 300;
    --z-modal:    400;

}