/*
 * Material Design 3 – Design Tokens pre SmartHomeConfigurator
 * Hodnoty prevzaté priamo zo Stitch projektu (ID: 850286653920940656)
 * Brand farba: #0061a4 (primary-container / surface-tint)
 * Dokumentácia: https://m3.material.io/styles/color/the-color-system
 */

/* --- Google Fonts: Roboto Flex (variable font) + Material Symbols --- */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

:root {
  /* ================================================
   * MD3 Color System – Light scheme
   * Source: Stitch HTML tailwind config (all 5 screens)
   * ================================================ */

  /* Primary */
  --md-sys-color-primary:                    #00497d;
  --md-sys-color-on-primary:                 #ffffff;
  --md-sys-color-primary-container:          #0061a4;
  --md-sys-color-on-primary-container:       #c0dbff;
  --md-sys-color-primary-fixed:              #d1e4ff;
  --md-sys-color-primary-fixed-dim:          #9fcaff;
  --md-sys-color-on-primary-fixed:           #001d36;
  --md-sys-color-on-primary-fixed-variant:   #00497d;
  --md-sys-color-inverse-primary:            #9fcaff;

  /* Secondary */
  --md-sys-color-secondary:                  #4b6269;
  --md-sys-color-on-secondary:               #ffffff;
  --md-sys-color-secondary-container:        #cee7ef;
  --md-sys-color-on-secondary-container:     #51686f;
  --md-sys-color-secondary-fixed:            #cee7ef;
  --md-sys-color-secondary-fixed-dim:        #b2cbd3;
  --md-sys-color-on-secondary-fixed:         #061f25;
  --md-sys-color-on-secondary-fixed-variant: #334a51;

  /* Tertiary */
  --md-sys-color-tertiary:                   #752a5e;
  --md-sys-color-on-tertiary:                #ffffff;
  --md-sys-color-tertiary-container:         #914277;
  --md-sys-color-on-tertiary-container:      #ffc9e7;
  --md-sys-color-tertiary-fixed:             #ffd8ec;
  --md-sys-color-tertiary-fixed-dim:         #ffaede;
  --md-sys-color-on-tertiary-fixed:          #3b002d;
  --md-sys-color-on-tertiary-fixed-variant:  #752a5e;

  /* Error */
  --md-sys-color-error:                      #ba1a1a;
  --md-sys-color-on-error:                   #ffffff;
  --md-sys-color-error-container:            #ffdad6;
  --md-sys-color-on-error-container:         #93000a;

  /* Background */
  --md-sys-color-background:                 #f8f9ff;
  --md-sys-color-on-background:              #191c20;

  /* Surface */
  --md-sys-color-surface:                    #f8f9ff;
  --md-sys-color-on-surface:                 #191c20;
  --md-sys-color-surface-variant:            #e1e2e8;
  --md-sys-color-on-surface-variant:         #414750;
  --md-sys-color-surface-bright:             #f8f9ff;
  --md-sys-color-surface-dim:                #d8dae0;
  --md-sys-color-surface-tint:               #0061a4;
  --md-sys-color-surface-container-lowest:   #ffffff;
  --md-sys-color-surface-container-low:      #f2f3fa;
  --md-sys-color-surface-container:          #eceef4;
  --md-sys-color-surface-container-high:     #e6e8ee;
  --md-sys-color-surface-container-highest:  #e1e2e8;

  /* Outline */
  --md-sys-color-outline:                    #717782;
  --md-sys-color-outline-variant:            #c1c7d2;

  /* Inverse */
  --md-sys-color-inverse-surface:            #2e3135;
  --md-sys-color-inverse-on-surface:         #eff0f7;

  /* Shadow & scrim */
  --md-sys-color-shadow:                     #000000;
  --md-sys-color-scrim:                      #000000;

  /* ================================================
   * MD3 Typography Scale
   * Source: Stitch – Roboto Flex, all scales
   * ================================================ */
  --md-sys-typescale-font: 'Roboto Flex', sans-serif;

  /* display-lg: 57px / 64px / 400 / -0.25px */
  --md-sys-typescale-display-large-size:        57px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-large-weight:      400;
  --md-sys-typescale-display-large-tracking:    -0.25px;

  /* headline-lg: 32px / 40px / 400 */
  --md-sys-typescale-headline-large-size:        32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-large-weight:      400;

  /* headline-lg-mobile: 28px / 34px / 400 */
  --md-sys-typescale-headline-large-mobile-size:        28px;
  --md-sys-typescale-headline-large-mobile-line-height: 34px;

  /* headline-md: 28px / 36px / 400 */
  --md-sys-typescale-headline-medium-size:        28px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-medium-weight:      400;

  /* title-lg: 22px / 28px / 500 */
  --md-sys-typescale-title-large-size:        22px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-large-weight:      500;

  /* title-md: 16px / 24px / 500 / 0.15px */
  --md-sys-typescale-title-medium-size:        16px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-medium-weight:      500;
  --md-sys-typescale-title-medium-tracking:    0.15px;

  /* body-lg: 16px / 24px / 400 / 0.5px */
  --md-sys-typescale-body-large-size:        16px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-large-weight:      400;
  --md-sys-typescale-body-large-tracking:    0.5px;

  /* body-md: 14px / 20px / 400 / 0.25px */
  --md-sys-typescale-body-medium-size:        14px;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-medium-weight:      400;
  --md-sys-typescale-body-medium-tracking:    0.25px;

  /* label-lg: 14px / 20px / 500 / 0.1px */
  --md-sys-typescale-label-large-size:        14px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-large-weight:      500;
  --md-sys-typescale-label-large-tracking:    0.1px;

  /* label-md: 12px / 16px / 500 / 0.5px */
  --md-sys-typescale-label-medium-size:        12px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-medium-weight:      500;
  --md-sys-typescale-label-medium-tracking:    0.5px;

  /* Legacy aliases used in existing PHP templates */
  --md-sys-typescale-display-font:      var(--md-sys-typescale-font);
  --md-sys-typescale-headline-font:     var(--md-sys-typescale-font);
  --md-sys-typescale-title-font:        var(--md-sys-typescale-font);
  --md-sys-typescale-body-font:         var(--md-sys-typescale-font);
  --md-sys-typescale-label-font:        var(--md-sys-typescale-font);

  --md-sys-typescale-display-large-size:    57px;
  --md-sys-typescale-display-medium-size:   45px;
  --md-sys-typescale-display-small-size:    36px;
  --md-sys-typescale-headline-large-size:   32px;
  --md-sys-typescale-headline-medium-size:  28px;
  --md-sys-typescale-headline-small-size:   24px;
  --md-sys-typescale-title-large-size:      22px;
  --md-sys-typescale-title-medium-size:     16px;
  --md-sys-typescale-title-small-size:      14px;
  --md-sys-typescale-body-large-size:       16px;
  --md-sys-typescale-body-medium-size:      14px;
  --md-sys-typescale-body-small-size:       12px;
  --md-sys-typescale-label-large-size:      14px;
  --md-sys-typescale-label-medium-size:     12px;
  --md-sys-typescale-label-small-size:      11px;

  /* ================================================
   * MD3 Shape (border-radius)
   * Source: Stitch borderRadius config
   * ================================================ */
  --md-sys-shape-corner-none:         0px;
  --md-sys-shape-corner-extra-small:  4px;   /* DEFAULT = 0.25rem */
  --md-sys-shape-corner-small:        8px;   /* lg = 0.5rem */
  --md-sys-shape-corner-medium:       12px;  /* xl = 0.75rem */
  --md-sys-shape-corner-large:        16px;
  --md-sys-shape-corner-extra-large:  24px;
  --md-sys-shape-corner-full:         9999px; /* full */

  /* ================================================
   * MD3 Elevation (box-shadow)
   * Source: Stitch plugin-container / card CSS
   * ================================================ */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0 1px 3px rgba(0,0,0,0.1);
  --md-sys-elevation-level2: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --md-sys-elevation-level3: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --md-sys-elevation-level4: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --md-sys-elevation-level5: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* Bottom nav bar (upward shadow) */
  --md-sys-elevation-bottom-bar: 0 -4px 6px -1px rgba(0,0,0,0.05);

  /* ================================================
   * MD3 Motion (transitions)
   * ================================================ */
  --md-sys-motion-duration-short1:   50ms;
  --md-sys-motion-duration-short2:   100ms;
  --md-sys-motion-duration-short3:   150ms;
  --md-sys-motion-duration-short4:   200ms;
  --md-sys-motion-duration-medium1:  250ms;
  --md-sys-motion-duration-medium2:  300ms;
  --md-sys-motion-duration-medium3:  350ms;
  --md-sys-motion-duration-medium4:  400ms;
  --md-sys-motion-duration-long1:    450ms;
  --md-sys-motion-duration-long2:    500ms;
  --md-sys-motion-easing-standard:   cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);

  /* ================================================
   * SHC Plugin Aliases – používaj tieto v plugin CSS
   * ================================================ */

  /* Farby */
  --shc-primary:              var(--md-sys-color-primary);
  --shc-primary-container:    var(--md-sys-color-primary-container);
  --shc-on-primary:           var(--md-sys-color-on-primary);
  --shc-on-primary-container: var(--md-sys-color-on-primary-container);
  --shc-secondary:            var(--md-sys-color-secondary);
  --shc-secondary-container:  var(--md-sys-color-secondary-container);
  --shc-tertiary:             var(--md-sys-color-tertiary);
  --shc-tertiary-container:   var(--md-sys-color-tertiary-container);
  --shc-error:                var(--md-sys-color-error);
  --shc-surface:              var(--md-sys-color-surface);
  --shc-surface-low:          var(--md-sys-color-surface-container-low);
  --shc-surface-high:         var(--md-sys-color-surface-container-high);
  --shc-on-surface:           var(--md-sys-color-on-surface);
  --shc-on-surface-muted:     var(--md-sys-color-on-surface-variant);
  --shc-outline:              var(--md-sys-color-outline);
  --shc-outline-light:        var(--md-sys-color-outline-variant);
  --shc-background:           var(--md-sys-color-background);

  /* Typography */
  --shc-font:              var(--md-sys-typescale-font);
  --shc-font-size-xs:      var(--md-sys-typescale-label-small-size);
  --shc-font-size-sm:      var(--md-sys-typescale-body-small-size);
  --shc-font-size-md:      var(--md-sys-typescale-body-medium-size);
  --shc-font-size-lg:      var(--md-sys-typescale-body-large-size);
  --shc-font-size-title:   var(--md-sys-typescale-title-medium-size);
  --shc-font-size-h3:      var(--md-sys-typescale-headline-small-size);

  /* Shape */
  --shc-radius-sm:   var(--md-sys-shape-corner-small);
  --shc-radius-md:   var(--md-sys-shape-corner-medium);
  --shc-radius-lg:   var(--md-sys-shape-corner-large);
  --shc-radius-xl:   var(--md-sys-shape-corner-extra-large);
  --shc-radius-full: var(--md-sys-shape-corner-full);

  /* Elevation */
  --shc-shadow-sm: var(--md-sys-elevation-level1);
  --shc-shadow-md: var(--md-sys-elevation-level2);
  --shc-shadow-lg: var(--md-sys-elevation-level4);

  /* Motion */
  --shc-transition-fast:   var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  --shc-transition-normal: var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
  --shc-transition-slow:   var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized);

  /* Spacing */
  --shc-space-xs:  4px;
  --shc-space-sm:  8px;
  --shc-space-md:  16px;
  --shc-space-lg:  24px;
  --shc-space-xl:  32px;
  --shc-space-2xl: 48px;
}

/* ================================================
 * Material Symbols – base settings
 * ================================================ */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ================================================
 * Global plugin wrapper reset
 * ================================================ */
.shc-configurator-wrapper,
.shc-my-projects-wrapper {
  font-family: var(--shc-font);
  color: var(--shc-on-surface);
  background-color: var(--shc-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ================================================
 * MD3 Web Components – global overrides
 * ================================================ */
md-filled-button,
md-outlined-button,
md-text-button,
md-filled-tonal-button {
  --md-filled-button-container-color: var(--md-sys-color-primary);
  --md-filled-button-label-text-color: var(--md-sys-color-on-primary);
  --md-outlined-button-outline-color: var(--md-sys-color-outline);
}

md-outlined-text-field,
md-filled-text-field {
  --md-outlined-field-focus-indicator-color: var(--md-sys-color-primary);
  --md-outlined-field-label-text-color: var(--md-sys-color-on-surface-variant);
}

md-elevated-card {
  --md-elevated-card-container-color: var(--md-sys-color-surface-container-low);
  --md-elevated-card-container-shadow-color: var(--md-sys-color-shadow);
  border-radius: var(--md-sys-shape-corner-medium);
}

md-dialog {
  --md-dialog-container-color: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-extra-large);
}