@import 'tailwindcss';

@source '../../app/Filament/**/*.php';
@source '../../resources/views/**/*.blade.php';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

/*
| Studio 6 design tokens
|
| Every value is lifted verbatim from the Claude Design artboards in design/.
| Do not invent new brand colours here — if a shade is missing from the design,
| that is a design decision, not a CSS one.
*/
@theme {
    --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --font-display: 'Instrument Serif', ui-serif, Georgia, serif;

    /* Dark sections */
    --color-ink: #16110d;        /* page background, dark sections */
    --color-surface: #1e1813;    /* raised cards on ink */
    --color-surface-2: #241d17;  /* image wells inside cards */

    /* Light sections */
    --color-cream: #f8f4ed;
    --color-cream-2: #efe8dc;
    --color-cream-3: #ded4c3;

    /* Brand amber */
    --color-amber-brand: #e99a22;
    --color-amber-deep: #c97d12;  /* on light backgrounds — passes contrast */
    --color-amber-soft: #f2c46b;  /* hover only */

    /* Text on dark */
    --color-fog-100: #f8f4ed;
    --color-fog-200: #e7dfd3;
    --color-fog-300: #c9bfb2;
    --color-fog-400: #a99c8e;
    --color-fog-500: #9c8f81;
    --color-fog-600: #8e8175;
    --color-fog-700: #7c7065;
    --color-fog-800: #6e6255;

    /* Text on light */
    --color-slate-warm: #5e534a;
    --color-slate-deep: #2e2620;

    --color-whatsapp: #25d366;
    --color-whatsapp-ink: #0b2e17;

    /* Hairlines — the design uses rgba over ink/cream everywhere */
    --color-line-dark: rgb(248 244 237 / 0.12);
    --color-line-light: rgb(22 17 13 / 0.1);
}

@layer base {
    html {
        scroll-behavior: smooth;
        /* the sticky header is 72px tall; anchor targets must clear it */
        scroll-padding-top: 84px;
    }

    body {
        background: var(--color-ink);
        color: var(--color-slate-deep);
        -webkit-font-smoothing: antialiased;
    }

    /* The design sets no visible focus ring; add one that respects the palette. */
    :focus-visible {
        outline: 2px solid var(--color-amber-brand);
        outline-offset: 2px;
        border-radius: 4px;
    }

    [x-cloak] {
        display: none !important;
    }
}

@layer utilities {
    /*
    | Fluid type scales copied from the artboards' clamp() values so the
    | Blade markup stays readable instead of repeating clamp() inline.
    */
    .text-display-1 {
        font-size: clamp(42px, 6.4vw, 80px);
        line-height: 1.02;
        letter-spacing: -0.02em;
    }
    .text-display-2 {
        font-size: clamp(34px, 4.4vw, 58px);
        line-height: 1.06;
        letter-spacing: -0.02em;
    }
    .text-display-3 {
        font-size: clamp(30px, 3.8vw, 50px);
        line-height: 1.08;
        letter-spacing: -0.02em;
    }

    .section-y {
        padding-block: clamp(72px, 9vw, 128px);
    }
    .section-y-sm {
        padding-block: clamp(64px, 8vw, 110px);
    }

    .eyebrow {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    /* The design's entrance animation on the hero. */
    .animate-rise {
        animation: s6rise 0.8s ease both;
    }
    .animate-rise-delayed {
        animation: s6rise 0.9s 0.12s ease both;
    }
    .animate-pulse-dot {
        animation: s6pulse 2.6s ease-in-out infinite;
    }
}

@keyframes s6rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes s6pulse {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.35);
    }
}

@media (prefers-reduced-motion: reduce) {
    .animate-rise,
    .animate-rise-delayed,
    .animate-pulse-dot {
        animation: none;
    }
    html {
        scroll-behavior: auto;
    }
}

/*
| Article body typography.
|
| The rich editor emits plain HTML, so the styling lives here rather than
| being sprinkled through the editor output.
*/
.prose-studio6 {
    color: var(--color-fog-300);
    font-size: 17px;
    line-height: 1.75;
}
.prose-studio6 > * + * {
    margin-top: 1.25em;
}
.prose-studio6 h2 {
    color: var(--color-fog-100);
    font-family: var(--font-display);
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.15;
    margin-top: 1.8em;
}
.prose-studio6 h3 {
    color: var(--color-fog-100);
    font-size: 20px;
    font-weight: 600;
    margin-top: 1.6em;
}
.prose-studio6 a {
    color: var(--color-amber-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.prose-studio6 ul,
.prose-studio6 ol {
    padding-inline-start: 1.4em;
}
.prose-studio6 ul { list-style: disc; }
.prose-studio6 ol { list-style: decimal; }
.prose-studio6 li + li { margin-top: 0.5em; }
.prose-studio6 strong { color: var(--color-fog-100); font-weight: 600; }
.prose-studio6 blockquote {
    border-inline-start: 2px solid var(--color-amber-brand);
    padding-inline-start: 1.2em;
    color: var(--color-fog-200);
    font-style: italic;
}
.prose-studio6 img {
    border-radius: 18px;
    border: 1px solid var(--color-line-dark);
}
.prose-studio6 table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
.prose-studio6 th,
.prose-studio6 td {
    border: 1px solid var(--color-line-dark);
    padding: 10px 14px;
    text-align: start;
}