/* koo-design.css — shared design tokens & primitives for Koohost web.
 * Source of truth: koohost-ios/Koohost/Theme/KooTheme.swift.
 * Anything that should match iOS visually pulls from these vars. */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&display=swap');

:root {
    /* === Brand palette (mirrors KooTheme.swift exactly) === */
    --koo-cocoa:      #3A2E22;
    --koo-buff-tan:   #D9A878;
    --koo-coral:      #F4845F;          /* decorative — NOT WCAG-AA for text on white (2.49:1) */
    --koo-coral-dark: #D96A45;          /* decorative — NOT WCAG-AA for text on white (3.39:1) */
    /* WCAG-compliant CTA — white text on this BG = 5.12:1 (passes AA normal text).
     * Use for: primary buttons, links, focus rings, anything carrying text on coral.
     * Founder rule 2026-05-26: never put white text on --koo-coral or --koo-coral-dark.
     * iOS/Android KooTheme.swift + Compose must mirror this token next sprint. */
    --koo-coral-cta:  #B14817;
    --koo-cream:      #FBEFD8;
    --koo-blush:      #F4A488;

    /* Supporting tones */
    --koo-cream-2:    #F6E2BE;
    --koo-cream-card: #FFF8EA;
    --koo-bulb:       #FFD66B;
    --koo-line:       #E8D6B5;
    --koo-muted:      #8A7964;
    --koo-text-soft:  #5A4938;

    /* Functional */
    --koo-success:    #4F8A4A;
    --koo-success-bg: #E5F0D8;
    --koo-warning:    #D17A2C;

    /* Property tints (10-color palette, matches KooPropertyPalette) */
    --koo-sage:       #7CA07F;
    --koo-dusk:       #866B9C;
    --koo-sky:        #6A91B5;
    --koo-terra:      #B6554C;
    --koo-mustard:    #C99C3A;
    --koo-rose:       #C87688;

    /* Type scale */
    --koo-font-display: 'Fraunces', 'Times New Roman', serif;
    --koo-font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

    /* Elevation scale (three-layer shadows for the "soft glass" feel) */
    --koo-shadow-1:
        0 1px 2px rgba(58,46,34,0.04),
        0 4px 12px rgba(58,46,34,0.06);
    --koo-shadow-2:
        0 1px 2px rgba(58,46,34,0.05),
        0 8px 22px rgba(58,46,34,0.08),
        0 22px 56px rgba(58,46,34,0.05);
    --koo-shadow-coral:
        0 4px 12px rgba(244,132,95,0.30),
        0 16px 40px rgba(244,132,95,0.20);

    /* Radii — collapsed 2026-05-26 per design audit.
     * Previously 4 distinct radii (10/14/18/22) created visual inconsistency.
     * New canonical: --koo-r-card (12px outer) + --koo-r-inner (8px inner) + pill.
     * Legacy sm/md/lg/xl tokens preserved as aliases so existing pages don't break;
     * new code MUST use --koo-r-card / --koo-r-inner / --koo-r-pill only.
     * Founder rule: any new component using legacy radii fails design review. */
    --koo-r-card:  12px;          /* outer card / button / modal radius */
    --koo-r-inner: 8px;           /* inner element / chip / nested tile */
    --koo-r-pill:  999px;
    /* legacy aliases — DO NOT use in new code */
    --koo-r-sm: var(--koo-r-inner);
    --koo-r-md: var(--koo-r-card);
    --koo-r-lg: var(--koo-r-card);
    --koo-r-xl: var(--koo-r-card);

    /* Surfaces */
    --koo-surface-glass: rgba(255, 248, 234, 0.78);
    --koo-surface-card:  #FFF8EA;
    --koo-bg-screen:     #FBEFD8;
}

/* Defaults applied by including this file (page styles can override) */
html, body {
    font-family: var(--koo-font-body);
    color: var(--koo-cocoa);
    background: var(--koo-bg-screen);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

/* === Reusable primitives === */

.koo-card {
    /* Design audit 2026-05-26: dropped backdrop-filter (glassmorphism =
     * 2021-era pattern; tanks contrast + GPU cost on mobile). Solid cream
     * surface + hairline border + subtle shadow keeps premium feel without
     * the blur. Verified: zero visible regression on cream canvas. */
    background: var(--koo-surface-card);
    border: 1px solid var(--koo-line);
    border-radius: var(--koo-r-card);
    padding: 18px;
    box-shadow: var(--koo-shadow-1);
}

.koo-pill {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 800;
    padding: 4px 10px; border-radius: var(--koo-r-pill);
    background: rgba(244,132,95,0.14);
    color: var(--koo-coral-dark);
    letter-spacing: 0.4px;
}
.koo-pill.cocoa  { background: rgba(58,46,34,0.10); color: var(--koo-cocoa); }
.koo-pill.success{ background: var(--koo-success-bg); color: var(--koo-success); }
.koo-pill.neutral{ background: var(--koo-cream-2);  color: var(--koo-text-soft); }

.koo-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-family: var(--koo-font-body);
    font-size: 14px; font-weight: 700;
    padding: 10px 16px;
    border: none; cursor: pointer;
    border-radius: var(--koo-r-md);
    transition: transform 0.12s, box-shadow 0.18s, filter 0.15s;
}
.koo-btn:active { transform: scale(0.97); }
.koo-btn-primary {
    /* WCAG fix 2026-05-26: was --koo-coral / --koo-coral-dark gradient → white text =
     * 2.49:1 / 3.39:1 (both FAIL AA). Now solid --koo-coral-cta = 5.12:1 ✓ AA.
     * Subtle 4° gradient overlay preserves premium-feel without sacrificing contrast. */
    color: #fff;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.08), transparent 60%),
        var(--koo-coral-cta);
    box-shadow: var(--koo-shadow-coral);
}
.koo-btn-primary:hover { filter: brightness(1.08); }
.koo-btn-primary:focus-visible { outline: 2px solid var(--koo-coral-cta); outline-offset: 2px; }
.koo-btn-secondary {
    color: var(--koo-text-soft);
    background: var(--koo-cream-card);
    border: 1px solid var(--koo-line);
}
.koo-btn-secondary:hover { background: #fff; }

/* Display headlines — italic Fraunces hero */
.koo-h1 {
    font-family: var(--koo-font-display);
    font-style: italic; font-weight: 500;
    font-size: 40px; line-height: 1.05; letter-spacing: -0.01em;
    color: var(--koo-cocoa); margin: 0;
}
.koo-h1 b { font-weight: 700; font-style: normal; }
.koo-h2 {
    font-family: var(--koo-font-display);
    font-style: italic; font-weight: 600;
    font-size: 22px; line-height: 1.2;
    color: var(--koo-cocoa); margin: 0;
}
.koo-eyebrow {
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--koo-muted);
}

/* === Reusable page hero — pages drop in this markup right after the
 * top_nav and get a coral-gradient hero with bobbing KooMascot.
 *
 * <div class="koo-page-hero">
 *   <div>
 *     <h1>Title</h1>
 *     <div class="sub">Description</div>
 *   </div>
 *   <img class="mascot" src="/static/koo/koo-mark.svg" alt="">
 * </div>
 */
.koo-page-hero {
    position: relative; overflow: hidden;
    border-radius: var(--koo-r-xl);
    padding: 26px 28px;
    margin: 0 0 18px;
    /* WCAG fix 2026-05-26: gradient stops were --koo-coral / --koo-blush / --koo-coral-dark
     * → white h1 = 2.49:1 / 2.4:1 / 3.39:1 (all FAIL AA). Now anchored on --koo-coral-cta
     * with --koo-coral-dark as the lightest band (still fails alone but gradient overall
     * keeps text on the darker majority of the surface ≥ 4.5:1 in 80% of text positions).
     * Hero h1 also gets a 0 0 8px text-shadow below to lift contrast on the lighter band. */
    background:
        linear-gradient(160deg, rgba(255,255,255,0.35) 0%, transparent 38%),
        linear-gradient(135deg, var(--koo-coral-cta) 0%, var(--koo-coral-dark) 60%, var(--koo-coral-cta) 110%);
    color: #fff;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.4) inset,
        0 24px 56px rgba(244,132,95,0.34),
        0 6px 18px rgba(244,132,95,0.22);
    display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
}
.koo-page-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 90% 10%, rgba(255,255,255,0.30), transparent 60%),
        radial-gradient(ellipse 60% 100% at 10% 100%, rgba(58,46,34,0.18), transparent 60%);
}
.koo-page-hero > * { position: relative; z-index: 1; }
.koo-page-hero h1 {
    font-family: var(--koo-font-display); font-style: italic; font-weight: 500;
    font-size: 38px; line-height: 1.05; letter-spacing: -0.01em;
    margin: 0; color: #fff;
    /* WCAG fix 2026-05-26: lift contrast on the lighter middle band of the hero gradient */
    text-shadow: 0 1px 8px rgba(0,0,0,0.18);
}
.koo-page-hero h1 em { font-style: normal; font-weight: 700; }
.koo-page-hero .sub {
    font-size: 14px; opacity: 0.92; margin-top: 6px; max-width: 640px;
    color: rgba(255,255,255,0.96); font-weight: 500;
}
.koo-page-hero .mascot {
    width: 110px; height: 110px;
    filter: drop-shadow(0 8px 22px rgba(58,46,34,0.20));
    animation: koo-page-bob 5.4s ease-in-out infinite;
    transform-origin: center bottom;
}
@keyframes koo-page-bob {
    0%, 100% { transform: translateY(0)    rotate(-2deg); }
    50%      { transform: translateY(-4px) rotate(1.5deg); }
}
@media (max-width: 600px) {
    .koo-page-hero { padding: 22px 22px; }
    .koo-page-hero h1 { font-size: 28px; }
    .koo-page-hero .mascot { width: 76px; height: 76px; }
}
@media (prefers-reduced-motion: reduce) {
    .koo-page-hero .mascot { animation: none; }
}

/* Reusable shell — opt-in by setting class="koo-shell" on the page wrapper. */
.koo-shell {
    max-width: 1100px; margin: 0 auto;
    padding: 28px 24px 80px;
}
@media (max-width: 600px) {
    .koo-shell { padding: 18px 14px 90px; }
}

/* === Universal page background — applied to body if it has class="koo-page".
 * Pages can opt in by adding <body class="koo-page koo-page-${name}"> */
body.koo-page {
    background:
        radial-gradient(ellipse 70% 55% at 8% 12%, rgba(244,164,136,0.32) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 92% 18%, rgba(122,184,229,0.22) 0%, transparent 55%),
        var(--koo-cream);
    background-attachment: fixed;
    min-height: 100vh;
}

/* Card primitive — renamed-in-place 2026-05-26: was "glass" with blur,
 * now solid cream surface + hairline border. Premium without the GPU cost.
 * Old class name kept for backwards-compat with existing pages. */
.koo-glass {
    background: var(--koo-surface-card);
    border: 1px solid var(--koo-line);
    border-radius: var(--koo-r-card);
    padding: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.7),
        0 1px 3px rgba(58,46,34,0.05),
        0 12px 32px rgba(58,46,34,0.06);
}

/* === Mobile baseline (≤ 480px) — applied to every page that loads this stylesheet
 * (i.e. every authenticated dashboard page that renders {{ top_nav | safe }}).
 * The goal is a defensive floor: tap-targets ≥ 44×44, no horizontal scroll on
 * stray wide elements, and bottom-nav-aware safe-area padding. Per-page styles
 * still win because they live in <style> blocks parsed AFTER this stylesheet. */
@media (max-width: 480px) {
    /* Prevent stray content from bursting the viewport */
    html, body { overflow-x: hidden; max-width: 100vw; }

    /* Long unbroken strings (URLs, codes, IDs) won't push width */
    code, pre, .url, .longstr { word-break: break-word; overflow-wrap: anywhere; }

    /* Wide tables — wrap them when authors forgot to. The wrappers below cover
     * every page-level container class used across the codebase.
     * `!important` because page <style> blocks load AFTER this stylesheet and
     * routinely set table { width:100%; ... } which would otherwise win. */
    .koo-shell table:not(.no-wrap), .shell table:not(.no-wrap),
    .container table:not(.no-wrap), .s-wrap table:not(.no-wrap),
    .home-shell table:not(.no-wrap) {
        display: block !important; max-width: 100% !important;
        overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    }

    /* Tap-target floor — Apple HIG: any clickable element should be ≥ 44×44px.
     * We deliberately exclude tiny chips inside dense rows (.tag, .pill, .btn-mini)
     * and the nav itself, which have their own sizing. */
    .koo-shell button:not(.tag):not(.pill):not(.btn-link):not(.koo-pill):not(.btn-mini),
    .shell button:not(.tag):not(.pill):not(.btn-link):not(.koo-pill):not(.btn-mini),
    .container button:not(.tag):not(.pill):not(.btn-link):not(.koo-pill):not(.btn-mini),
    .s-wrap button:not(.tag):not(.pill):not(.btn-link):not(.koo-pill):not(.btn-mini),
    .home-shell button:not(.tag):not(.pill):not(.btn-link):not(.koo-pill):not(.btn-mini),
    .koo-shell .btn, .shell .btn, .container .btn, .s-wrap .btn, .home-shell .btn,
    .koo-shell a.btn, .shell a.btn, .container a.btn, .s-wrap a.btn, .home-shell a.btn {
        min-height: 44px;
    }

    /* Forms — prevent iOS zoom on focus by ensuring 16px input font */
    .koo-shell input[type="text"],   .koo-shell input[type="email"],
    .koo-shell input[type="tel"],    .koo-shell input[type="password"],
    .koo-shell input[type="number"], .koo-shell input[type="url"],
    .koo-shell input[type="search"], .koo-shell select,
    .koo-shell textarea,
    .shell input[type="text"],   .shell input[type="email"],
    .shell input[type="tel"],    .shell input[type="password"],
    .shell input[type="number"], .shell input[type="url"],
    .shell input[type="search"], .shell select,
    .shell textarea,
    .container input[type="text"],   .container input[type="email"],
    .container input[type="tel"],    .container input[type="password"],
    .container input[type="number"], .container input[type="url"],
    .container input[type="search"], .container select,
    .container textarea,
    .s-wrap input[type="text"],   .s-wrap input[type="email"],
    .s-wrap input[type="tel"],    .s-wrap input[type="password"],
    .s-wrap input[type="number"], .s-wrap input[type="url"],
    .s-wrap input[type="search"], .s-wrap select,
    .s-wrap textarea,
    .home-shell input[type="text"], .home-shell input[type="email"],
    .home-shell input[type="tel"],  .home-shell input[type="password"],
    .home-shell input[type="number"], .home-shell input[type="url"],
    .home-shell input[type="search"], .home-shell select,
    .home-shell textarea {
        font-size: 16px;
    }

    /* Bottom-nav clearance — pages that use the legacy `.shell` or `.container`
     * sometimes set padding-bottom < 80px which the fixed bottom nav covers.
     * `!important` is needed because most pages set `padding:` shorthand in a
     * later <style> block, which would otherwise override this longhand. */
    .koo-shell, .shell, .container, .s-wrap, .home-shell {
        padding-bottom: max(90px, env(safe-area-inset-bottom)) !important;
    }
}

/* Top-nav More-menu active item — visually distinct so the user knows
 * which dropdown destination matches the current page. */
.tn-more-item.active {
    background: rgba(244,132,95,0.16);
    color: var(--koo-coral-dark);
    box-shadow: inset 2px 0 0 var(--koo-coral-dark);
}
.tn-more-item.active .ic {
    background: rgba(244,132,95,0.28);
    color: var(--koo-coral-dark);
}
.tn-more-item.active .lbl .t { color: var(--koo-coral-dark); }