/*
 * Slice 19i baseline → Slice 20ν festival refresh.
 *
 * Old direction (19i): warm restrained editorial. Cream + terracotta
 * + butter + sage. Tasteful but reserved.
 *
 * New direction (20ν): VIBRANT FOOD-TRUCK FESTIVAL. Saturated colors
 * pulled from Mexican mercados, Korean street alleys, Caribbean
 * carnival, vintage diner signs. The cream base survives so the page
 * isn't visually exhausting, but every accent gets punched up:
 *   - terracotta → coral red (hotter, more festival)
 *   - butter → sunshine yellow (mango bright, not muted cracker)
 *   - sage → palm green (saturated, alive)
 *   - + azure: NEW cobalt accent for surprise + cooling balance
 *   - + grape: NEW deep magenta for hover/active depth
 * Token names stay the same so every page that read --ftapp-terracotta
 * etc. instantly inherits the new vibe.
 */

:root {
    /* Color — vibrant festival, single muted base */
    --ftapp-cream:        #FFF4E0;  /* warmer peach-cream, less greige */
    --ftapp-cream-deep:   #FFE6BF;  /* deeper apricot for sunken surfaces */
    --ftapp-ink:          #1D2939;  /* deep navy, softer than pure black */
    --ftapp-ink-soft:     #475467;  /* cool-grey secondary */
    --ftapp-ink-mute:     #98A2B3;  /* tertiary / hint */
    --ftapp-line:         #E4D8B9;  /* warmer hairline */
    --ftapp-terracotta:   #EF4444;  /* PRIMARY: coral red, food-truck festival hot */
    --ftapp-terracotta-d: #B91C1C;  /* hover/active */
    --ftapp-forest:       #047857;  /* deep palm-green for "open now" */
    --ftapp-amber:        #F97316;  /* tangerine — caution/status, CTA accents */
    --ftapp-butter:       #FACC15;  /* sunshine mango yellow (was muted cracker) */
    --ftapp-butter-d:     #CA8A04;  /* mustard hover */
    --ftapp-sage:         #22C55E;  /* palm green (was muted sage) */
    --ftapp-azure:        #0EA5E9;  /* NEW — cobalt accent, surprise + cooling */
    --ftapp-grape:        #C026D3;  /* NEW — deep magenta for hover depth */

    /* Type — display serif for character, sans for utility, mono for numerals */
    --ftapp-font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --ftapp-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --ftapp-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Type scale — generous, editorial */
    --ftapp-fs-hero:      clamp(2.5rem, 5vw, 4rem);   /* hero h1 */
    --ftapp-fs-display:   clamp(2rem, 3.5vw, 2.75rem);
    --ftapp-fs-h2:        1.5rem;
    --ftapp-fs-h3:        1.25rem;
    --ftapp-fs-body:      1rem;
    --ftapp-fs-small:     0.875rem;
    --ftapp-fs-micro:     0.75rem;

    /* Line heights */
    --ftapp-lh-tight:     1.1;
    --ftapp-lh-snug:      1.3;
    --ftapp-lh-relaxed:   1.6;

    /* Spacing — 4px-based scale */
    --ftapp-space-1:      0.25rem;
    --ftapp-space-2:      0.5rem;
    --ftapp-space-3:      0.75rem;
    --ftapp-space-4:      1rem;
    --ftapp-space-5:      1.5rem;
    --ftapp-space-6:      2rem;
    --ftapp-space-7:      3rem;
    --ftapp-space-8:      4rem;

    /* Borders */
    --ftapp-radius-sm:    4px;
    --ftapp-radius-md:    8px;
    --ftapp-radius-lg:    14px;
    --ftapp-radius-pill:  999px;
    --ftapp-border:       1px solid var(--ftapp-line);

    /* Motion — restrained */
    --ftapp-ease:         cubic-bezier(0.2, 0, 0.2, 1);
    --ftapp-dur-fast:     150ms;
    --ftapp-dur-base:     220ms;
}

/* Set defaults — body-level so unstyled pages still inherit the system */
html, body {
    background: var(--ftapp-cream);
    color: var(--ftapp-ink);
    font-family: var(--ftapp-font-body);
    font-size: var(--ftapp-fs-body);
    line-height: var(--ftapp-lh-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    margin: 0;
}

h1, h2, h3, h4 {
    font-family: var(--ftapp-font-display);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: var(--ftapp-lh-tight);
    color: var(--ftapp-ink);
}

/* Tabular numerals everywhere a price/time/count shows up */
.ftapp-tnum, .ftapp-mono {
    font-family: var(--ftapp-font-mono);
    font-feature-settings: "tnum" 1;
}

/* Reusable building blocks — minimal, on-theme */

/* "OPEN NOW" pill: terracotta, small caps, signals live status */
.ftapp-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--ftapp-space-2);
    padding: var(--ftapp-space-1) var(--ftapp-space-3);
    background: var(--ftapp-terracotta);
    color: #fff;
    font-family: var(--ftapp-font-body);
    font-size: var(--ftapp-fs-micro);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--ftapp-radius-pill);
}
.ftapp-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: ftapp-pill-pulse 1.6s var(--ftapp-ease) infinite;
}
@keyframes ftapp-pill-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

.ftapp-button {
    display: inline-flex;
    align-items: center;
    gap: var(--ftapp-space-2);
    padding: var(--ftapp-space-3) var(--ftapp-space-5);
    background: var(--ftapp-ink);
    color: var(--ftapp-cream);
    font-family: var(--ftapp-font-body);
    font-size: var(--ftapp-fs-body);
    font-weight: 500;
    border: 1px solid var(--ftapp-ink);
    border-radius: var(--ftapp-radius-pill);
    cursor: pointer;
    transition: background var(--ftapp-dur-base) var(--ftapp-ease),
                transform var(--ftapp-dur-fast) var(--ftapp-ease);
}
.ftapp-button:hover {
    background: var(--ftapp-terracotta);
    border-color: var(--ftapp-terracotta);
}
.ftapp-button:active { transform: translateY(1px); }
.ftapp-button:disabled { opacity: 0.5; cursor: not-allowed; }
.ftapp-button--ghost {
    background: transparent;
    color: var(--ftapp-ink);
}
.ftapp-button--ghost:hover {
    background: var(--ftapp-cream-deep);
    color: var(--ftapp-ink);
    border-color: var(--ftapp-ink);
}

/* The wordmark — Fraunces italic, the only place the typeface gets to shout */
.ftapp-wordmark {
    font-family: var(--ftapp-font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: var(--ftapp-ink);
    text-decoration: none;
}