/* ═══════════════════════════════════════════════════════════════
   MANI DESIGN SYSTEM — Color Tokens
   File: mani-colors-ltr.css

   Single source of truth for the entire platform palette.
   To change the brand identity or add dark mode,
   only edit these variables — every page inherits them.
   ═══════════════════════════════════════════════════════════════ */

:root {

    /* Radius (shared card/shape rhythm — single source) */
    --r-s:   10px;
    --r-m:   14px;
    --r-l:   18px;
    --r-xl:  22px;
    --r-round: 100px;

    /* Rhythm (shared vertical section padding — single source) */
    --sec-y: 80px;

    /* Ink / Text */
    --ink:        #0b1120;
    --ink2:       #1a2340;
    --slate:      #5b6b8a;
    --silver:     #94a3b8;

    /* Surfaces */
    --mist:       #e2e8f0;
    --snow:       #f8fafc;
    --white:      #ffffff;

    /* Brand Blue */
    --blue:       #2563eb;
    --blue-rgb:   37, 99, 235;
    --blue-h:     #1d4ed8;
    --blue-d:     #1e40af;
    --blue-l:     #eff6ff;
    --blue-xl:    #dbeafe;

    /* Green / Success */
    --green:      #059669;
    --green-d:    #065f46;   /* deep green — text on green tints */
    --green-l:    #ecfdf5;
    --green-xl:   #d1fae5;   /* tint border */

    /* Red / Danger */
    --red:        #ef4444;
    --red-d:      #991b1b;   /* deep red — text on red tints */
    --red-l:      #fef2f2;
    --red-xl:     #fecaca;   /* tint border */

    /* Amber / Warning */
    --amber:      #f59e0b;
    --amber-d:    #92400e;   /* deep amber — text on amber tints */
    --amber-l:    #fffbeb;
    --amber-xl:   #fde68a;   /* tint border */

    /* Purple */
    --purple:     #7c3aed;
    --purple-d:   #5b21b6;
    --purple-l:   #f5f3ff;
    --purple-xl:  #ddd6fe;   /* tint border */

    /* WhatsApp (third-party brand colour — the ONE allowed brand exception) */
    --wa:         #25d366;
    --wa-d:       #1ebe5d;

    /* Code blocks (dark surface — blog tutorials) */
    --code-bg:      #0f172a;
    --code-surface: #1e293b;
    --code-line:    #334155;
    --code-ink:     #475569;

    /* Gold (Affiliates) */
    --gold:       #d97706;
    --gold-l:     #fffbeb;
    --gold-h:     #b45309;

    /* Social buttons (white-alpha, for dark surfaces like the CTA) — single source */
    --social-bg:    #64748b;
    --social-ic:    rgba(255, 255, 255, .55);
    --social-bg-h:  rgba(255, 255, 255, .16);
    --social-ic-h:  #ffffff;

    /* Shell (mnx-*) */
    --mnx-bg:              #f8fafc;
    --mnx-surface:         #ffffff;
    --mnx-drawer-surface:  #f8fafc;
    --mnx-ink:             #1b2a4a;
    --mnx-rail-active:     #2563eb;
    --mnx-is-peek:         #d6deed;
    --background-mnx-ink:  #2563eb;
    --mnx-text:            #1b2a4ac4;
    --mnx-text-l:          #94a3b8;
    --mnx-icons-color:     #1b2a4ab8;
    --mnx-blue:            #2563eb;
    --mnx-blue-l:          #eff6ff;
    --mnx-blue-h:          #2563eb;
    --mnx-green:           #059669;
    --mnx-green-l:         #ecfdf5;
    --mnx-danger:          #ef4444;
    --mnx-border:          #e2e8f0;

    /* Button System (mni-btn) */
    --btn-bg:              #2563eb;
    --btn-bg-h:            #2563eb;
    --btn-text:            #ffffff;
    --btn-shadow:          rgba(var(--blue-rgb), .28);
    --btn-shadow-h:        rgba(var(--blue-rgb), .4);
    --btn-grad-top:        #0052ff;   /* hover-overlay gradient (top)    */
    --btn-grad-bot:        #003bcc;   /* hover-overlay gradient (bottom) */


    /* Luxury Nav CTA Tokens */
    --nav-cta-bg:      var(--blue-l);    /* #eff6ff */
    --nav-cta-text:    var(--blue-d);    /* #1e40af */
    --nav-cta-border:  var(--blue-xl);   /* #dbeafe */
    
    /* Hover State */
    --nav-cta-hover-bg: var(--blue);
    --nav-cta-hover-text: var(--white);
}

/* ═══════════════════════════════════════════════════════════════════
   UNIVERSAL CTA (.mcta-*) — the ONE CTA design, single source.
   Rendered by the shared partial mani/fragments/shared/_cta.html and
   used on every page. All colors come from the tokens above.
   (Do NOT recreate CTA styles in any page stylesheet.)
   ═══════════════════════════════════════════════════════════════════ */
.mcta { padding: var(--sec-y) 24px; background: var(--snow); }
.mcta-box { max-width: 860px; margin: 0 auto; text-align: center; background: var(--ink); border-radius: var(--r-xl); padding: 56px 40px; position: relative; overflow: hidden; }
.mcta-box::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; }
.mcta-box::after { content: ''; position: absolute; width: 300px; height: 300px; background: rgba(var(--blue-rgb), .15); border-radius: 50%; filter: blur(70px); top: -80px; inset-inline-end: -60px; pointer-events: none; }
.mcta-box h2 { font-size: 30px; font-weight: 800; color: var(--white); margin: 0 0 12px; position: relative; z-index: 2; letter-spacing: -.3px; }
.mcta-box .mcta-p { font-size: 17px; font-weight: 600; color: rgba(255, 255, 255, .6); margin: 0 0 30px; position: relative; z-index: 2; }
.mcta-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; position: relative; z-index: 2; }
.mcta-social { display: flex; justify-content: center; gap: 10px; margin-block-start: 26px; position: relative; z-index: 2; }
/* Light chip on the dark CTA panel. The fill is bright enough that a white glyph
   would vanish into it, so the icon rides dark (--ink) at rest and hover goes to
   solid white — the state change reads as "lights up", not "inverts". */
.mcta-social a { width: 38px; height: 38px; border-radius: var(--r-round); display: flex; align-items: center; justify-content: center; font-size: 15px;
    background: rgba(244, 244, 244, .61); border: 1px solid rgba(255, 255, 255, .28); color: var(--ink);
    text-decoration: none; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.mcta-social a:hover { background: var(--white); border-color: var(--white); color: var(--ink); transform: translateY(-2px); }
.mcta-social a:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
@media (max-width: 600px) { .mcta { padding: 52px 18px; } .mcta-box { padding: 40px 22px; } .mcta-box h2 { font-size: 25px; } }