/*
 * Bold Friendly Design System
 * Style Guide: knowledge/04-marketing/design-system/style-guide-bold-friendly.md
 *
 * Loaded by header-ai-bold-friendly.php
 * Tailwind Config (colors, fonts, shadows) is in the header <script> block.
 * This file contains the utility classes that Tailwind CDN cannot generate.
 */

body {
    margin: 0;
    padding: 0;
    font-family: 'Source Sans Pro', sans-serif;
    line-height: 1.6;
    color: #525459;
}

/* Neo Card — rounded card with brutal offset shadow */
.neo-card {
    border: 3px solid #525459;
    box-shadow: 5px 5px 0 #525459;
    border-radius: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
}
.neo-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 #525459;
}

/* Neo Button — pill button with press effect */
.neo-btn {
    border: 3px solid #525459;
    box-shadow: 4px 4px 0 #525459;
    border-radius: 9999px;
    transition: transform 0.15s, box-shadow 0.15s;
    display: inline-block;
}
.neo-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #525459;
}
.neo-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 0 #525459;
}

/* Section Divider — 6px solid rounded line between sections */
.section-divider {
    height: 6px;
    background: #525459;
    border-radius: 9999px;
}

/* Text Outline — for H1 in Hero sections */
.text-outline {
    -webkit-text-stroke: 2px #525459;
    paint-order: stroke fill;
}

/* Brutal Borders */
.border-brutal { border: 3px solid #525459; }
.border-brutal-4 { border: 4px solid #525459; }