/* jts-design.css – Global design system for Joel Technical Solutions */

/* Color palette */
:root {
    --deep-green: #073F38;
    --dark-teal: #0D6258;
    --primary-green: #159A72;
    --bright-accent: #20A485;
    --light-mint: #E8F6F1;
    --very-light-bg: #F7FBF9;
    --body-text: #536D68;
    --dark-heading: #164743;
    --secondary-text: #718582;
    --orange-accent: #DF8B3A;
}

/* Global typography */
body {
    font-family: 'Montserrat', sans-serif;
    color: var(--body-text);
    background-color: var(--very-light-bg);
}

h1, h2, h3, h4 {
    color: var(--dark-heading);
    line-height: 1.2;
}

/* Utility classes */
.jts-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.jts-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Product poster layout */
.jts-oven-poster, .jts-product-poster {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    background: var(--very-light-bg);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-bottom: 2rem;
}
.jts-oven-visual, .jts-product-visual {
    position: relative;
    padding: 2rem;
    text-align: center;
}
.jts-oven-glow, .jts-product-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(22,115,97,0.15), transparent 70%);
    pointer-events: none;
}
.jts-oven-ring, .jts-product-ring {
    position: absolute;
    border: 2px solid rgba(22,115,97,0.1);
    border-radius: 50%;
    top: 10%; left: 10%; right: 10%; bottom: 10%;
    animation: rotate 30s linear infinite;
}
.jts-oven-ring.ring-2, .jts-product-ring.ring-2 {
    top: 20%; left: 20%; right: 20%; bottom: 20%;
    animation-duration: 45s;
}
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.jts-oven-image, .jts-product-image {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
}
.jts-oven-poster:hover .jts-oven-image,
.jts-product-poster:hover .jts-product-image { transform: scale(1.05); }

.jts-oven-label, .jts-product-label {
    position: absolute;
    top: 1rem; left: 1rem;
    background: var(--primary-green);
    color: #fff;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.jts-oven-live-dot, .jts-product-live-dot { width: 0.5rem; height: 0.5rem; background: #fff; border-radius: 50%; }
.jts-oven-index, .jts-product-index {
    position: absolute;
    top: 1rem; right: 1rem;
    background: var(--dark-teal);
    color: #fff;
    padding: 0.25rem 0.5rem;
    font-weight: 600;
    border-radius: 0.25rem;
    font-size: 0.85rem;
}

/* Card components */
.jts-type-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    transition: box-shadow 0.3s ease;
}
.jts-type-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.jts-type-icon { font-size: 2rem; color: var(--primary-green); margin-bottom: 0.5rem; }
.jts-type-number { display: block; font-size: 1.2rem; font-weight: 600; color: var(--dark-teal); margin-bottom: 0.5rem; }

/* Button utilities */
.jts-btn-primary {
    background: var(--dark-teal);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.2s ease;
}
.jts-btn-primary:hover { background: var(--deep-green); transform: translateY(-2px); }
.jts-btn-outline {
    border: 2px solid var(--primary-green);
    color: var(--primary-green);
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    transition: background 0.3s ease, color 0.3s ease;
}
.jts-btn-outline:hover { background: var(--light-mint); color: var(--dark-heading); }

/* Responsive grid for product types */
.jts-oven-types, .jts-product-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }

/* Feature card utilities */
.jts-feature-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    padding: 1.5rem;
    transition: box-shadow 0.3s ease;
}
.jts-feature-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

/* CTA button utilities */
.jts-cta-primary { background: var(--dark-teal); color: #fff; padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-weight: 600; }
.jts-cta-primary:hover { background: var(--deep-green); }

/* Misc */
.max-w-7xl { max-width: 80rem; }