/* ========================================================
   DevYarn — Tailwind v4 Theme Configuration
   Uses @theme to register CSS variables as Tailwind utilities
   CDN: https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4
   ======================================================== */

@import "tailwindcss";

@theme {
    /* ——— Fonts ——— */
    --font-figtree: "Figtree", sans-serif;
    --font-inter:   "Inter", sans-serif;

    /* ——— Breakpoints ——— */
    --breakpoint-sm:  640px;
    --breakpoint-md:  768px;
    --breakpoint-lg:  1024px;
    --breakpoint-xl:  1280px;
    --breakpoint-2xl: 1536px;
    --breakpoint-3xl: 1680px;
    --breakpoint-4xl: 1920px;

    /* ——— Color Palette ——— */

    /* Accent */
    --color-accent:         var(--color-accent);
    --color-accent-alt:     var(--color-accent-alt);

    /* Accent opacity scale */
    --color-accent-3:       var(--color-accent-3);
    --color-accent-5:       var(--color-accent-5);
    --color-accent-6:       var(--color-accent-6);
    --color-accent-8:       var(--color-accent-8);
    --color-accent-10:      var(--color-accent-10);
    --color-accent-15:      var(--color-accent-15);
    --color-accent-20:      var(--color-accent-20);
    --color-accent-25:      var(--color-accent-25);
    --color-accent-30:      var(--color-accent-30);
    --color-accent-40:      var(--color-accent-40);
    --color-accent-50:      var(--color-accent-50);

    --color-accent-alt-5:   var(--color-accent-alt-5);
    --color-accent-alt-6:   var(--color-accent-alt-6);
    --color-accent-alt-10:  var(--color-accent-alt-10);
    --color-accent-alt-20:  var(--color-accent-alt-20);

    /* Backgrounds */
    --color-bg:             var(--color-bg);
    --color-bg-surface:     var(--color-bg-surface);
    --color-bg-elevated:    var(--color-bg-elevated);
    --color-bg-card:        var(--color-bg-card);
    --color-bg-card-alt:    var(--color-bg-card-alt);
    --color-bg-muted:       var(--color-bg-muted);
    --color-bg-icon:        var(--color-bg-icon);
    --color-bg-hero:        var(--color-bg-hero);
    --color-bg-badge:       var(--color-bg-badge);
    --color-bg-glass:       var(--color-bg-glass);
    --color-bg-glass-80:    var(--color-bg-glass-80);
    --color-bg-navbar:      var(--color-bg-navbar);
    --color-overlay:        var(--color-overlay);
    --color-overlay-80:     var(--color-overlay-80);

    /* White-opacity glass tints */
    --color-white-3:        var(--color-white-3);
    --color-white-4:        var(--color-white-4);
    --color-white-5:        var(--color-white-5);
    --color-white-6:        var(--color-white-6);
    --color-white-8:        var(--color-white-8);
    --color-white-10:       var(--color-white-10);
    --color-white-40:       var(--color-white-40);

    /* Text */
    --color-text:           var(--color-text);
    --color-text-secondary: var(--color-text-secondary);
    --color-text-muted:     var(--color-text-muted);
    --color-text-dim:       var(--color-text-dim);
    --color-text-subtle:    var(--color-text-subtle);
    --color-text-inactive:  var(--color-text-inactive);
    --color-text-dimmed:    var(--color-text-dimmed);
    --color-text-label:     var(--color-text-label);

    /* Text white-opacity */
    --color-text-w15:       var(--color-text-w15);
    --color-text-w20:       var(--color-text-w20);
    --color-text-w25:       var(--color-text-w25);
    --color-text-w30:       var(--color-text-w30);
    --color-text-w40:       var(--color-text-w40);
    --color-text-w50:       var(--color-text-w50);
    --color-text-w60:       var(--color-text-w60);
    --color-text-w70:       var(--color-text-w70);
    --color-text-w80:       var(--color-text-w80);
    --color-text-w90:       var(--color-text-w90);

    /* Black / White */
    --color-black:          var(--color-black);
    --color-white:          var(--color-white);

    /* Borders */
    --color-border:         var(--color-border);
    --color-border-subtle:  var(--color-border-subtle);
    --color-border-w4:      var(--color-border-w4);
    --color-border-w6:      var(--color-border-w6);
    --color-border-w8:      var(--color-border-w8);
    --color-border-w10:     var(--color-border-w10);
    --color-border-w12:     var(--color-border-w12);
    --color-border-w15:     var(--color-border-w15);
    --color-border-w20:     var(--color-border-w20);

    /* Status */
    --color-status-live-bg:     var(--color-status-live-bg);
    --color-status-live-border: var(--color-status-live-border);

    /* Social */
    --color-facebook:       var(--color-facebook);
    --color-facebook-hover: var(--color-facebook-hover);
    --color-twitter:        var(--color-twitter);
    --color-twitter-hover:  var(--color-twitter-hover);
    --color-linkedin:       var(--color-linkedin);
    --color-linkedin-hover: var(--color-linkedin-hover);
    --color-whatsapp:       var(--color-whatsapp);
    --color-whatsapp-hover: var(--color-whatsapp-hover);

    /* Semantic */
    --color-error:          var(--color-error);
    --color-success:        var(--color-success);
    --color-label:          var(--color-label);

    /* ——— Shadows ——— */
    --shadow-card:          var(--shadow-card);
    --shadow-card-hover:    var(--shadow-card-hover);
    --shadow-elevated:      var(--shadow-elevated);
    --shadow-popup:         var(--shadow-popup);
    --shadow-play:          var(--shadow-play);
    --shadow-play-hover:    var(--shadow-play-hover);
    --shadow-accent-sm:     var(--shadow-accent-sm);
    --shadow-accent-md:     var(--shadow-accent-md);
    --shadow-accent-lg:     var(--shadow-accent-lg);
    --shadow-accent-glow:   var(--shadow-accent-glow);
    --shadow-wa:            var(--shadow-wa);
    --shadow-wa-hover:      var(--shadow-wa-hover);

    /* ——— Animations ——— */
    --animate-marquee: marquee 20s linear infinite;
}

/* ——— Container ——— */
@utility container {
    margin-inline: auto;
    padding-inline: 1.5rem;
    width: 100%;
    @media (width >= 768px) { max-width: 720px; }
    @media (width >= 1024px) { max-width: 960px; }
    @media (width >= 1280px) { max-width: 1140px; }
    @media (width >= 1536px) { max-width: 1280px; }
}

@keyframes marquee {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}