@import 'tailwindcss';

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

/*
 | Brokam International — design system  (v3, "Corporate Light")
 |
 | One bundle, two surfaces:
 |   • default (light)  — the public marketing site AND the admin CMS.
 |                        Clean white canvas, deep-navy ink, brand-orange accent,
 |                        soft elevation, photography-forward.
 |   • .theme-dark      — opt-in inverted bands (footer, CTA, dark hero scrims).
 |                        Re-points the colour tokens to light-on-navy.
 */
@theme {
    --font-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
    --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

    /* Brand palette (orange) */
    --color-brand-50: #fbf3ee;
    --color-brand-100: #f6e2d6;
    --color-brand-200: #ecc1aa;
    --color-brand-300: #e09c79;
    --color-brand-400: #d9763f;   /* light orange */
    --color-brand-500: #b35327;   /* brand orange — primary */
    --color-brand-600: #9c4620;   /* deep orange */
    --color-brand-700: #7d3819;
    --color-brand-800: #5f2b14;
    --color-brand-900: #421e0e;

    /* Corporate navy — depth bands, headings, footer */
    --color-navy-50:  #eef3f8;
    --color-navy-100: #d6e2ee;
    --color-navy-300: #7f9bb8;
    --color-navy-500: #2f5277;
    --color-navy-700: #163454;
    --color-navy-800: #122b45;
    --color-navy-900: #0d1f33;

    /* Slate / neutrals (light surface) */
    --color-slate-ink: #14253b;   /* primary heading ink — corporate navy-black */
    --color-slate-900: #16202a;
    --color-slate-700: #3f4a57;   /* strong body */
    --color-slate-500: #5b6675;   /* body / secondary */
    --color-slate-400: #8a94a1;   /* muted / meta */
    --color-slate-200: #e4e8ee;   /* borders / hairlines */
    --color-slate-100: #eef1f5;   /* faint fills */

    --color-paper: #ffffff;       /* page canvas */
    --color-paper-200: #f5f7fa;   /* tinted section */
    --color-night: #0d1f33;       /* deep navy band */

    --radius-card: 16px;

    /* Surfaces (light defaults) */
    --surface: #ffffff;
    --surface-border: #e4e8ee;
}

/* ============================================================
   DARK THEME — inverted bands only (footer, CTA, hero scrims)
   Re-point colour custom-properties so Tailwind colour utilities
   inside .theme-dark resolve to light-on-navy values.
   ============================================================ */
.theme-dark {
    --color-paper: #0d1f33;
    --color-paper-200: #122b45;
    --color-night: #0a1828;

    --color-slate-ink: #f3f6fa;   /* primary light text */
    --color-slate-700: #cdd6e2;   /* body */
    --color-slate-500: #9fb0c4;   /* muted */
    --color-slate-400: #7b8ca1;   /* faint */
    --color-slate-200: rgba(255, 255, 255, 0.14);  /* borders */
    --color-slate-100: rgba(255, 255, 255, 0.08);  /* hairlines */

    --surface: rgba(255, 255, 255, 0.04);
    --surface-border: rgba(255, 255, 255, 0.12);

    color-scheme: dark;
}

@layer base {
    [x-cloak] { display: none !important; }
    html { scroll-behavior: smooth; }
    body {
        background-color: var(--color-paper);
        color: var(--color-slate-700);
        font-family: var(--font-sans);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
    }
    h1, h2, h3, h4, h5 {
        font-family: var(--font-display);
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 1.08;
        color: var(--color-slate-ink);
    }
    :focus-visible {
        outline: 2px solid var(--color-brand-500);
        outline-offset: 3px;
        border-radius: 2px;
    }
    ::selection { background: var(--color-brand-500); color: #fff; }
    img { max-width: 100%; height: auto; }
}

@layer components {
    .shell {
        width: 100%;
        max-width: 1240px;
        margin-inline: auto;
        padding-inline: 1.5rem;
    }
    @media (min-width: 1024px) { .shell { padding-inline: 2.5rem; } }

    /* Corporate eyebrow / kicker — small caps label with a square mark. */
    .kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        font-family: var(--font-mono);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--color-brand-600);
    }
    .kicker::before {
        content: "";
        width: 1.4rem;
        height: 2px;
        background: var(--color-brand-500);
        border-radius: 2px;
    }
    .theme-dark .kicker { color: var(--color-brand-400); }

    /* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
        font-family: var(--font-display);
        font-weight: 600;
        font-size: 0.92rem;
        padding: 0.8rem 1.4rem;
        border-radius: 10px;
        transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
        cursor: pointer;
        line-height: 1;
    }
    .btn-primary {
        background: var(--color-brand-500);
        color: #fff;
        box-shadow: 0 10px 24px -12px rgba(179,83,39,.7);
    }
    .btn-primary:hover { background: var(--color-brand-600); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(179,83,39,.8); }
    .btn-ghost {
        border: 1px solid var(--surface-border);
        color: var(--color-slate-ink);
        background: var(--surface);
    }
    .btn-ghost:hover { border-color: var(--color-brand-500); color: var(--color-brand-600); }
    .btn-navy {
        background: var(--color-navy-900);
        color: #fff;
    }
    .btn-navy:hover { background: var(--color-navy-800); transform: translateY(-2px); }
    .btn-light { background: #fff; color: var(--color-navy-900); }
    .btn-light:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0,0,0,.4); }
    .btn-outline-light {
        border: 1px solid var(--surface-border);
        color: var(--color-slate-ink);
        background: transparent;
    }
    .btn-outline-light:hover { border-color: var(--color-brand-500); color: var(--color-brand-600); }
    .theme-dark .btn-outline-light:hover { color: var(--color-brand-300); }

    /* Cards */
    .card {
        background: var(--surface);
        border: 1px solid var(--surface-border);
        border-radius: var(--radius-card);
        box-shadow: 0 1px 2px rgba(20,37,59,.04), 0 12px 28px -22px rgba(20,37,59,.25);
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    .card:hover {
        transform: translateY(-4px);
        border-color: rgba(179,83,39,.35);
        box-shadow: 0 6px 14px rgba(20,37,59,.08), 0 28px 50px -26px rgba(20,37,59,.35);
    }
    .theme-dark .card { backdrop-filter: blur(6px); box-shadow: none; }
    .theme-dark .card:hover {
        box-shadow: 0 24px 60px -30px rgba(0,0,0,.6);
        background: rgba(255,255,255,.06);
    }

    .section { padding-block: clamp(4rem, 8vw, 7rem); }

    /* Subtle dotted mesh background (light). */
    .mesh-bg {
        background-image: radial-gradient(circle at 1px 1px, rgba(20,37,59,.07) 1px, transparent 0);
        background-size: 26px 26px;
    }
    .grid-bg {
        background-image:
            linear-gradient(rgba(20,37,59,.045) 1px, transparent 1px),
            linear-gradient(90deg, rgba(20,37,59,.045) 1px, transparent 1px);
        background-size: 60px 60px;
    }
    .theme-dark .mesh-bg {
        background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 0);
        background-size: 26px 26px;
    }
    .theme-dark .grid-bg {
        background-image:
            linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
        background-size: 60px 60px;
    }

    /* Hairline divider */
    .hairline { height: 1px; background: var(--surface-border); }

    /* Animated link underline */
    .link-underline { position: relative; }
    .link-underline::after {
        content: "";
        position: absolute;
        left: 0; bottom: -3px;
        width: 100%; height: 2px;
        background: var(--color-brand-500);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .25s ease;
    }
    .link-underline:hover::after { transform: scaleX(1); }

    /* ---------- Photography helpers ---------- */

    /* Framed media: rounded image with a soft ring + hover zoom. */
    .media {
        position: relative;
        overflow: hidden;
        border-radius: var(--radius-card);
        background: var(--color-slate-100);
        isolation: isolate;
    }
    .media > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s cubic-bezier(.2,.7,.2,1);
    }
    .media-zoom:hover > img { transform: scale(1.05); }

    /* Ring overlay so photos sit cleanly on white. */
    .media-ring::after {
        content: "";
        position: absolute; inset: 0;
        border-radius: inherit;
        box-shadow: inset 0 0 0 1px rgba(20,37,59,.08);
        pointer-events: none;
        z-index: 2;
    }

    /* Dark scrim for text-over-image (bottom-up + brand tint). */
    .scrim::before {
        content: "";
        position: absolute; inset: 0;
        background:
            linear-gradient(to top, rgba(13,31,51,.92) 0%, rgba(13,31,51,.45) 45%, rgba(13,31,51,.05) 100%);
        z-index: 1;
    }
    .scrim-brand::before {
        background:
            linear-gradient(120deg, rgba(13,31,51,.86) 10%, rgba(13,31,51,.55) 55%, rgba(179,83,39,.35) 100%);
    }

    /* Tile — kept for legacy bento usage (now light & neutral). */
    .tile {
        position: relative;
        border-radius: var(--radius-card);
        border: 1px solid var(--surface-border);
        background:
            radial-gradient(120% 120% at 100% 0%, rgba(179,83,39,.08), transparent 60%),
            var(--color-paper-200);
        overflow: hidden;
        isolation: isolate;
    }

    .prose-brokam :where(p) { margin-block: 1rem; line-height: 1.8; color: var(--color-slate-700); }
    .prose-brokam :where(h2) { margin-top: 2.5rem; margin-bottom: 1rem; font-size: 1.6rem; }
    .prose-brokam :where(h3) { margin-top: 2rem; margin-bottom: .75rem; font-size: 1.25rem; }
    .prose-brokam :where(ul) { margin-block: 1rem; padding-left: 1.25rem; list-style: none; color: var(--color-slate-700); }
    .prose-brokam :where(li) { margin-block: .5rem; line-height: 1.6; position: relative; padding-left: 1.1rem; }
    .prose-brokam :where(li)::before { content: "▸"; position: absolute; left: 0; color: var(--color-brand-500); }
}

@layer utilities {
    /* Radial glow blob helper (used sparingly on navy bands). */
    .glow {
        position: absolute;
        border-radius: 9999px;
        filter: blur(80px);
        pointer-events: none;
        z-index: 0;
    }

    .reveal {
        opacity: 0;
        transform: translateY(18px);
        animation: reveal .7s cubic-bezier(.2,.7,.2,1) forwards;
        animation-delay: var(--d, 0s);
    }
    @keyframes reveal { to { opacity: 1; transform: none; } }

    @media (prefers-reduced-motion: reduce) {
        .reveal { animation: none; opacity: 1; transform: none; }
        .media > img { transition: none; }
        html { scroll-behavior: auto; }
    }
}