/* public/themes/sportsarena.css
   Mapped from sportsarena SCSS partials.
   Palette highlights:
     - brand-02 (#E30613 red)  -> accent / primary buttons / nav active / links
     - brand-03 (#0099FF blue) -> hover / table results hover / nav active text
     - brand-01 (#FFFFFF)      -> light surfaces (footer bg, etc.)
     - text-01 (#0F1F35)       -> main text / footer text
     - third (#210F5C morado)  -> header & podcast sections
*/

/* ============= FONTS ============= */
@font-face {
  font-family: 'CircularStd-Book'; /* regular 300/400 */
  src: url("https://dy822md8ge77v.cloudfront.net/Portales%20Espa%C3%B1a/Ovooz/Chicago/Fuente/CircularStd-Book.otf") format("opentype");
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'CircularStd-Medium'; /* bold 500/600 */
  src: url("https://dy822md8ge77v.cloudfront.net/Portales%20Espa%C3%B1a/Ovooz/Chicago/Fuente/CircularStd-Medium.otf") format("opentype");
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'CircularStd-Bold'; /* extrabold 700+ */
  src: url("https://dy822md8ge77v.cloudfront.net/Portales%20Espa%C3%B1a/Ovooz/Chicago/Fuente/CircularStd-Bold.otf") format("opentype");
  font-display: swap;
  font-style: normal;
}

:root {
  /* ============= TYPOGRAPHY ============= */
  --font-family-primary: 'CircularStd-Book', "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-secondary: 'CircularStd-Medium', "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ============= BRAND PRIMARY (white #FFFFFF) ============= */
  --color-brand-primary-50:  #ffffff;
  --color-brand-primary-100: #fafafa;
  --color-brand-primary-200: #f5f5f5;
  --color-brand-primary-300: #ededed;
  --color-brand-primary-400: #e0e0e0;
  --color-brand-primary-500: #ffffff;
  --color-brand-primary-600: #f2f2f2;
  --color-brand-primary-700: #d9d9d9;
  --color-brand-primary-800: #bfbfbf;
  --color-brand-primary-900: #a6a6a6;

  /* ============= BRAND SECONDARY (dark navy #0F1F35) ============= */
  --color-brand-secondary-50:  #e7e9eb;
  --color-brand-secondary-100: #b5bac0;
  --color-brand-secondary-200: #9198a2;
  --color-brand-secondary-300: #5e6978;
  --color-brand-secondary-400: #3f4c5d;
  --color-brand-secondary-500: #0F1F35;
  --color-brand-secondary-600: #0e1c30;
  --color-brand-secondary-700: #0b1626;
  --color-brand-secondary-800: #08111d;
  --color-brand-secondary-900: #060d16;

  /* ============= BRAND ACCENT (red #E30613  = $brand-02) ============= */
  --color-brand-accent-50:  #fde8e9;
  --color-brand-accent-100: #f7b8bb;
  --color-brand-accent-200: #f2959a;
  --color-brand-accent-300: #ec6569;
  --color-brand-accent-400: #e84049;
  --color-brand-accent-500: #E30613;
  --color-brand-accent-600: #c00510;
  --color-brand-accent-700: #96040d;
  --color-brand-accent-800: #74030a;
  --color-brand-accent-900: #580208;

  /* ============= BASE COLORS ============= */
  --color-base-light:        #ffffff;
  --color-base-light-op-64:  rgba(255, 255, 255, 0.64);
  --color-base-light-op-32:  rgba(255, 255, 255, 0.32);
  --color-base-light-op-10:  rgba(255, 255, 255, 0.10);

  --color-base-soft:         var(--color-brand-primary-500);
  --color-base-soft-op-90:   rgba(255, 255, 255, 0.90);
  --color-base-soft-op-80:   rgba(255, 255, 255, 0.80);
  --color-base-soft-op-50:   rgba(255, 255, 255, 0.50);
  --color-base-soft-op-30:   rgba(255, 255, 255, 0.30);
  --color-base-soft-op-10:   rgba(255, 255, 255, 0.10);
  --color-base-soft-op-5:    rgba(255, 255, 255, 0.05);

  --color-base-dark:         var(--color-brand-secondary-500);
  --color-base-dark-op-80:   rgba(15, 31, 53, 0.80);
  --color-base-dark-op-50:   rgba(15, 31, 53, 0.50); /* $text-02 */
  --color-base-dark-op-30:   rgba(15, 31, 53, 0.30);
  --color-base-dark-op-10:   rgba(15, 31, 53, 0.10); /* $text-05 / $table-border */

  /* ============= SEMANTIC COLORS ============= */
  /* Success - mapped to $ui-03 #01ca58 */
  --color-semantic-success-500: #01CA58;
  /* Warning - mapped to $ui-01 #f8a722 */
  --color-semantic-warning-500: #F8A722;
  /* Error - mapped to $ui-02 #ff223d (also $sixthColor #ff0000 close) */
  --color-semantic-error-500:   #FF223D;
  /* Info - mapped to $seventhColor / $brand-03 */
  --color-semantic-info-500:    #00A2FF;

  /* ============= TEXT ============= */
  --color-text-primary:    var(--color-brand-secondary-500); /* $text-01 */
  --color-text-secondary:  #222222;
  --color-text-tertiary:   #5D646D;                          /* $fontColor2 */
  --color-text-inverse:    #ffffff;                          /* $text-03 / $fontColor1 */
  --color-text-disabled:   var(--color-base-dark-op-50);     /* $text-02 */
  --color-text-accent:     var(--color-brand-accent-500);
  --color-text-success:    var(--color-semantic-success-500);
  --color-text-error:      var(--color-semantic-error-500);
  --color-text-warning:    var(--color-semantic-warning-500);
  --color-text-base:       #ffffff;
  --color-text-base-op-50: var(--color-base-dark-op-50);

  /* ============= ICON ============= */
  --color-icon-base:       #ffffff;
  --color-icon-base-op-64: var(--color-base-light-op-64);
  --color-icon-grey:       #9B9B9B;                          /* $text-09 */
  --color-icon-dark:       var(--color-brand-secondary-500);
  --color-icon-primary:    var(--color-brand-accent-500);

  /* ============= BORDERS ============= */
  --color-border-primary:     var(--color-base-dark-op-10);  /* $table-border */
  --color-border-divider:     #E7E7E7;                       /* $headline-hr-color */
  --color-border-base-op-10:  var(--color-base-light-op-10);
  --color-border-base-op-16:  rgba(255, 255, 255, 0.16);
  --color-border-accent:      var(--color-brand-accent-500);

  /* ============= SURFACES ============= */
  --color-surface-base:        #ffffff;
  --color-surface-base-op-32:  var(--color-base-light-op-32);
  --color-surface-base-op-10:  var(--color-base-light-op-10);
  --color-surface-soft:        var(--color-brand-primary-500);
  --color-surface-soft-op-90:  var(--color-base-soft-op-90);
  --color-surface-soft-op-80:  var(--color-base-soft-op-80);
  --color-surface-dark-op-80:  var(--color-base-dark-op-80);
  --color-surface-soft-op-50:  var(--color-base-soft-op-50);
  --color-surface-soft-op-5:   var(--color-base-soft-op-5);
  --color-surface-primary:     var(--color-brand-accent-500);

  /* ============= OVERLAY ============= */
  --color-overlay-dark: rgba(0, 0, 0, 0.8); /* $card-cover-featured-gradient-color-a */

  /* ============= SPORT TAGS (from $highlighted-*) ============= */
  /* Fútbol -> $ui-03 */
  --tags-futbol-bg:   #01CA58;
  --tags-futbol-text: #FFFFFF;
  --tags-futbol-500:  #01CA58;
  --tags-futbol-900:  #005525;

  /* Tenis -> $ui-01 */
  --tags-tenis-bg:   #F8A722;
  --tags-tenis-text: #FFFFFF;
  --tags-tenis-500:  #F8A722;
  --tags-tenis-900:  #68460E;

  /* Baloncesto -> $ui-06 */
  --tags-baloncesto-bg:   #FF7811;
  --tags-baloncesto-text: #FFFFFF;
  --tags-baloncesto-500:  #FF7811;
  --tags-baloncesto-900:  #6B3207;

  /* Rugby -> $brand-03 */
  --tags-rugby-bg:   #0099FF;
  --tags-rugby-text: #FFFFFF;

  /* Motor -> $ui-09 */
  --tags-motogp-bg:   #333333;
  --tags-motogp-text: #FFFFFF;
  --tags-f1-bg:       #333333;
  --tags-f1-text:     #FFFFFF;

  /* Cricket -> $ui-04 */
  --tags-cricket-bg:   #8C9BA5;
  --tags-cricket-text: #FFFFFF;

  /* Hockey -> $ui-02 */
  --tags-hockey-bg:   #FF223D;
  --tags-hockey-text: #FFFFFF;

  /* Mundial -> #23C6C8 */
  --tags-mundial-bg:   #23C6C8;
  --tags-mundial-text: #FFFFFF;

  /* Generic */
  --tags-other-bg:   #6B7280;
  --tags-other-text: #FFFFFF;

  --tags-sport-ball-bg:    #E9EAF9;
  --tags-sport-ball-text:  #1F30C2;
  --tags-sport-winter-bg:  #E9F3F9;
  --tags-sport-winter-text:#1F86C2;
  --tags-sport-motor-bg:   #FDF0E9;
  --tags-sport-motor-text: #E86625;
  --tags-sport-other-bg:   #F7E9F9;
  --tags-sport-other-text: #AD1FC2;

  /* ============= STATUS ============= */
  --status-live-bg:      #fde8e9;                            /* light-red based on accent */
  --status-live-text:    var(--color-brand-accent-500);      /* $brand-02 */
  --status-upcoming-bg:  var(--color-base-soft-op-10);
  --status-upcoming-text:#595959;
  --status-finished-bg:  #FFFFFF;
  --status-finished-text:var(--color-brand-secondary-500);

  /* ============= MATCH CARDS ============= */
  --card-bg:                   #ffffff;
  --card-border:               var(--color-base-dark-op-10);
  --card-header-bg:            var(--color-base-soft-op-10);
  --card-header-text:          var(--color-brand-secondary-500);
  --card-datetime-panel-bg:    var(--color-brand-accent-50);
  --card-datetime-panel-text:  var(--color-brand-accent-500);
  --card-datetime-panel-radius:var(--radius-md);
  --card-team-text:            var(--color-brand-secondary-500);
  --card-score-text:           var(--color-brand-secondary-500);
  --card-league-text:          #8c8c8c;
  --card-team-logo-border:     var(--color-base-dark-op-10);
  --card-grid-border-radius:   12px; /* $card-grid-border-radius */

  /* ============= BUTTONS ============= */
  /* Primary = accent red ($brand-02) */
  --button-primary-bg:         var(--color-brand-accent-500);
  --button-primary-text:       #ffffff;
  --button-primary-hover-bg:   var(--color-brand-accent-600);
  --button-primary-radius:     var(--radius-full);

  /* Secondary = morado ($thirdColor) */
  --button-secondary-bg:       var(--color-brand-primary-500);
  --button-secondary-text:     #ffffff;
  --button-secondary-hover-bg: var(--color-brand-primary-600);

  /* Default button text ($button-default-text-color) */
  --button-default-text-color: var(--color-base-dark-op-50);

  /* ============= SECTIONS ============= */
  --section-podcast-bg: #ffffff;
  --section-content-bg: #222222;
  --section-podcast-text: #222222;

  /* ============= HEADER ============= */
  --header-bg:           #ffffff;
  --header-text:         #333333;                        /* $header-welcome-text-link-color */
  --header-text-hover:   var(--color-base-light-op-64);
  --header-shadow:       0px 1px 2px -1px rgba(0,0,0,0.1), 0px 1px 3px 0px rgba(0,0,0,0.1);
  --header-border-bottom:1px solid rgba(15, 31, 53, 0.2); /* $text-06 */

  /* ============= FOOTER ============= */
  --footer-bg:          #ffffff;
  --footer-title:       #333333;
  --footer-text:        #333333;
  --footer-text-hover:  var(--color-brand-accent-600);
  --footer-border:      var(--color-base-light-op-10);

  /* ============= NAV ============= */
  --nav-link-color:              var(--color-brand-secondary-500); /* $nav-link-color */
  --nav-mobile-link-color:       var(--color-brand-accent-500);    /* $nav-mobile-link-color = $brand-02 */
  --nav-active-color:            #0099FF;                          /* $nav-active-color = $brand-03 */
  --nav-active-border-bottom:    3px solid var(--color-brand-accent-500); /* $border-bottom-active */
  --nav-lang-items-color:        #ffffff;                          /* $nav-lang-items-color = $brand-01 */
  --nav-dropdown-mobile-color:   var(--color-brand-secondary-500);
  --nav-item-background-hover:   rgba(227, 6, 19, 0.1);            /* rgba($brand-02, 0.1) */
  --nav-item-dropdown-bg-hover:  rgba(227, 6, 19, 0.1);
  --background-count-live:       #000000;
  --color-count-live:            #ffffff;

  /* ============= LINKS ============= */
  --links-standard-color: var(--color-brand-accent-500); /* $links-standard-color = $brand-02 */

  /* ============= TABLES ============= */
  --table-border:        var(--color-base-dark-op-10);
  --table-results-hover: #0099FF; /* $brand-03 */

  /* ============= AUDIO PLAYER ============= */
  --audio-background-color: var(--color-brand-accent-500); /* $brand-02 */
  --audio-color:            #ffffff;                       /* $brand-04 */

  /* ============= PLAYER (video) ============= */
  --player-video-progress-bar-bg: rgba(227, 6, 19, 0.5);  /* rgba($brand-02, 0.5) */
  --player-controls-background:   #000000;

  /* ============= QUIZ ============= */
  --quiz-status-bar-bg:   var(--color-brand-accent-500);
  --quiz-status-bar-text: #ffffff;

  /* ============= STATUS BAR / APP BANNER ============= */
  --status-bar-banner-app-bg: var(--color-brand-accent-500);

  /* ============= COOKIES ============= */
  --cookies-accent-color: var(--color-brand-accent-500);

  /* ============= HEADLINE ============= */
  --headline-hr-color:      #E7E7E7;
  --headline-link-color:    var(--color-brand-accent-500);
  --headline-subtitle-transform: none;

  /* ============= MESSAGE ============= */
  --cmp-message-bg-default:   #ffffff;
  --cmp-message-text-default: #ffffff;

  /* ============= PRODUCT CARD (NFT) ============= */
  --product-card-nft-title-color:              var(--color-brand-secondary-500);
  --product-card-nft-description-color:        #5b5b5b;                          /* $text-08 */
  --product-card-tag-reserved-bg:              #ffc0d4;
  --product-card-tag-reserved-text:            var(--color-brand-accent-500);
  --product-card-tag-transferring-bg:          rgba(241,157,23,0.3);
  --product-card-tag-transferring-text:        #F19D17;
  --product-card-tag-transfered-bg:            rgba(122,219,132,0.3);
  --product-card-tag-transfered-text:          #4DAE57;
  --product-card-claim-color:                  var(--color-brand-secondary-500);

  /* ============= IFRAME ============= */
  --iframe-text-block-bg: rgba(40,40,40,0.9);

  /* ============= HERO ============= */
  --hero-background-gradient: transparent;
  --hero-filter-color:        transparent;

  /* ============= POP-UP ============= */
  --pop-up-blur: 0px;

  /* ============= UNSUBSCRIBE ============= */
  --unsubscribe-accent2:      #00A2FF;                      /* $seventhColor */
  --unsubscribe-accent-text:  var(--color-brand-secondary-500);
  --unsubscribe-accent2-text: var(--color-brand-accent-500);

  /* ============= MOVISTAR ============= */
  --movistar-padding-mobile:  6rem;
  --movistar-padding-desktop: 7rem;
  --movistar-header-height:   60px;
  --movistar-slide-nav-height:40px;
  --movistar-background:      #000000;
  --movistar-text:            #ffffff;

  /* ============= CHATBOT ============= */
  --chatbot-error-img:           url("https://b2c-argo-contents.s3.eu-west-1.amazonaws.com/WinSports/Chatbot/Winnito%20Error.png");
  --chatbot-small-bot-logo-img:  url("https://b2c-argo-contents.s3.eu-west-1.amazonaws.com/WinSports/Chatbot/Winito%201.png");
  --chatbot-collapsed-bot-logo-img: url("https://b2c-argo-contents.s3.eu-west-1.amazonaws.com/WinSports/Chatbot/Winnito%202.png");

  /* ============= CARROUSEL ARROWS ============= */
  --carrousel-arrow-prev-svg:          url("https://b2c-portales.s3.us-east-1.amazonaws.com/WS/Flecha_Izquierda.svg");
  --carrousel-arrow-next-svg:          url("https://b2c-portales.s3.us-east-1.amazonaws.com/WS/Flecha.svg");
  --carrousel-arrow-prev-inactive-svg: url("https://b2c-portales.s3.us-east-1.amazonaws.com/WS/Flecha_Izquierda_Transparente.svg");
  --carrousel-arrow-next-inactive-svg: url("https://b2c-portales.s3.us-east-1.amazonaws.com/WS/Flecha_Derecha_Transparente.svg");

  /* ============= TAILWIND / SHADCN THEME ============= */
  --primary:               var(--color-brand-accent-500);
  --primary-foreground:    #ffffff;
  --destructive:           var(--color-semantic-error-500);
  --destructive-foreground:#ffffff;
  --secondary:             var(--color-brand-primary-500);
  --secondary-foreground:  #ffffff;
  --muted:                 #f5f5f5;
  --muted-foreground:      #595959;
  --accent:                var(--color-brand-accent-100);
  --accent-foreground:     var(--color-brand-accent-700);
  --border:                #d9d9d9;
  --input:                 #d9d9d9;
  --ring:                  var(--color-brand-accent-500);
}