/* ═══════════════════════════════════════════════════
   Miuix Design Tokens
   Exact values from Miuix source:
   - Colors.kt  (lightColorScheme)
   - TextStyles.kt
   - FloatingActionButton.kt
   - NavigationBar.kt
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Primary palette (from lightColorScheme in Colors.kt) ── */
  --mi-primary:                #3482FF;
  --mi-on-primary:             #FFFFFF;
  --mi-primary-variant:        #3482FF;
  --mi-on-primary-variant:     #AECDFF;
  --mi-primary-container:      #5D9BFF;
  --mi-on-primary-container:   #FFFFFF;
  --mi-disabled-primary:       #C2D9FF;
  --mi-disabled-on-primary:    #F3F8FF;
  --mi-disabled-primary-button:#C2D9FF;
  --mi-disabled-on-primary-button:#FFFFFF;
  --mi-disabled-primary-slider:#B8CFF5;

  /* ── Error (from Colors.kt) ── */
  --mi-error:                  #E94634;
  --mi-on-error:               #FFFFFF;
  --mi-error-container:        #FDF6F4;
  --mi-on-error-container:     #410002;

  /* ── Secondary (from Colors.kt) ── */
  --mi-secondary:              #E6E6E6;
  --mi-on-secondary:           #FFFFFF;
  --mi-secondary-variant:      #F0F0F0;
  --mi-on-secondary-variant:   #303030;
  --mi-disabled-secondary:     #F0F0F0;
  --mi-disabled-on-secondary:  #FCFCFC;
  --mi-disabled-secondary-variant:#F2F2F2;
  --mi-disabled-on-secondary-variant:#B2B2B2;
  --mi-secondary-container:    #F0F0F0;
  --mi-on-secondary-container: #A9A9A9;
  --mi-secondary-container-variant:#F0F0F0;
  --mi-on-secondary-container-variant:#A8A8A8;

  /* ── Tertiary (from Colors.kt) ── */
  --mi-tertiary-container:     #EAF2FF;
  --mi-on-tertiary-container:  #3482FF;
  --mi-tertiary-container-variant:#EAF2FF;

  /* ── Background / Surface (from Colors.kt) ── */
  --mi-background:             #FFFFFF;
  --mi-on-background:          #000000;
  --mi-on-background-variant:  #8C93B0;
  --mi-surface:                #F7F7F7;
  --mi-on-surface:             #000000;
  --mi-surface-variant:        #FFFFFF;
  --mi-on-surface-secondary:   rgba(0,0,0,0.8);
  --mi-on-surface-summary:     rgba(0,0,0,0.6);
  --mi-on-surface-actions:     rgba(0,0,0,0.4);
  --mi-disabled-on-surface:    #B2B2B2;

  /* ── Surface containers (from Colors.kt) ── */
  --mi-surface-container:          #FFFFFF;
  --mi-on-surface-container:       #000000;
  --mi-on-surface-container-var:   #959595;
  --mi-surface-container-high:     #E8E8E8;
  --mi-on-surface-container-high:  #A2A2A2;
  --mi-surface-container-highest:  #E8E8E8;
  --mi-on-surface-container-highest:#000000;

  /* ── Outline / Divider (from Colors.kt) ── */
  --mi-outline:                 #D9D9D9;
  --mi-divider-line:            #E0E0E0;
  --mi-divider-thickness:       0.75px; /* DividerDefaults.Thickness (0.75dp) */

  /* ── Window (from Colors.kt) ── */
  --mi-window-dimming:          rgba(0,0,0,0.3); /* Colors.windowDimming (0x4D000000) */
  --mi-window-backdrop-filter:  blur(14px) saturate(0.85);

  /* ── Slider (from Colors.kt) ── */
  --mi-slider-bg:               rgba(0,0,0,0.06);
  --mi-slider-key-point:        rgba(163,179,205,0.3);
  --mi-slider-key-fg:           #6EB5FF;

  /* ── Interaction state colors (from MiuixIndication alpha rules) ── */
  --mi-state-hover:             rgba(0,0,0,0.06);
  --mi-state-focus:             rgba(0,0,0,0.08);
  --mi-state-pressed:           rgba(0,0,0,0.10);
  --mi-primary-state-hover:     rgba(52,130,255,0.06);
  --mi-primary-state-focus:     rgba(52,130,255,0.08);
  --mi-primary-state-pressed:   rgba(52,130,255,0.10);
  --mi-inverse-state-weak:      rgba(255,255,255,0.92);
  --mi-scrim-weak:              rgba(0,0,0,0.32);
  --mi-live-badge:              #FFFFFF;
  --mi-live-shadow:             drop-shadow(0 1px 1px rgba(0,0,0,.72)) drop-shadow(0 0 4px rgba(0,0,0,.34));
  --mi-featured-badge:          #FFC400;
  --mi-featured-bg:             #FFF7D7;
  --mi-featured-bg-strong:      #FFE89A;
  --mi-featured-on-bg:          #5F4700;
  --mi-loading-track:           rgba(0,0,0,0.08);
  --mi-sheet-handle-color:      color-mix(in srgb, var(--mi-on-surface-summary) 20%, transparent);
  --mi-translucent-surface:     color-mix(in srgb, var(--mi-background) 78%, transparent);
  --mi-active-tertiary-bg:      color-mix(in srgb, var(--mi-tertiary-container) 78%, transparent);
  --mi-active-tertiary-pressed: color-mix(in srgb, var(--mi-on-primary-variant) 90%, transparent);
  --mi-dialog-overlay:          rgba(0,0,0,0.36);
  --mi-dialog-surface:          #FFFFFF;
  --mi-dialog-field:            #F3F5FA;
  --mi-dialog-button:           #F1F3F8;
  --mi-dialog-button-pressed:   #E7ECF5;
  --mi-dialog-border:           rgba(0,0,0,0.08);
  --mi-dialog-on-surface:       rgba(0,0,0,0.92);
  --mi-dialog-on-muted:         rgba(0,0,0,0.62);
  --mi-dialog-shadow:           0 10px 36px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.05);
  --mi-error-field:             #FFF0ED;
  --mi-error-pressed:           #C83124;

  /* ── Radius ── */
  --r-xs:  7px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  28px;
  --r-full: 9999px;

  /* ── Shadow (from Surface/FAB specs) ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.05);
  --shadow-md: 0 4px 10px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 24px rgba(0,0,0,.12);
  --shadow-float: 0 4px 10px rgba(0,0,0,.20);
  --shadow-popup: 0 8px 24px rgba(0,0,0,.16);

  /* ── Easing ── */
  --ease:         cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.2, 0.85, 0.25, 1.15);
  --ease-sin-out: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-decelerate-15: cubic-bezier(0, 0, 0.15, 1); /* DecelerateEasing(1.5f) */
  --ease-sheet-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-folme-sheet: cubic-bezier(0.18, 0.88, 0.2, 1.04); /* folmeSpring damping=.9 response=.38 */
  --ease-folme-popup: cubic-bezier(0.2, 0.82, 0.18, 1.06); /* spring damping=.82 stiffness=362.5 */
  --mi-duration-color: 50ms;       /* TopAppBar animateColorAsState tween(50) */
  --mi-duration-nav: 300ms;        /* NavigationBar animateDp/Float tween(300) */
  --mi-duration-search: 300ms;     /* SearchBar follows surrounding nav spring response */
  --mi-duration-feed-stagger: 18ms; /* local list item delay step, kept as a token */
  --mi-duration-popup-in: 200ms;   /* ListPopup AlphaEnterAnimationSpec tween(200) */
  --mi-duration-popup-out: 150ms;  /* ListPopup AlphaExitAnimationSpec tween(150) */
  --mi-duration-dim-in: 300ms;     /* ListPopup DimEnterAnimationSpec tween(300) */
  --mi-duration-dim-out: 150ms;    /* ListPopup DimExitAnimationSpec tween(150) */
  --mi-duration-dialog-dim-in: 300ms;  /* DialogContentLayout dim tween(300) */
  --mi-duration-dialog-dim-out: 250ms; /* DialogContentLayout dim tween(250) */
  --mi-duration-dialog: 260ms;     /* Dialog enter */
  --mi-duration-dialog-reset: 150ms;
  --mi-duration-sheet-enter: 320ms; /* BottomSheet enter without rebound */
  --mi-duration-sheet: 380ms;      /* BottomSheet folmeSpring response 0.38 */
  --mi-duration-popup-fraction: 362ms; /* ListPopup spring stiffness 362.5 mapped for CSS */
  --mi-duration-sheet-reset: 150ms;/* BottomSheet drag reset tween(150) */
  --mi-duration-press-in: 100ms;   /* BottomSheet drag handle press down */
  --mi-duration-press-out: 150ms;  /* BottomSheet drag handle release */
  --mi-duration-progress-linear: 1250ms;
  --mi-duration-progress-circular: 1000ms;
  --mi-duration-infinite: 800ms;
  --mi-duration-scrollbar-delay: 1000ms;
  --mi-duration-scrollbar-fade: 500ms;
  --mi-duration-reduced-motion: 1ms;
  --mi-sink-scale: .94;            /* SinkFeedback sinkAmount */
  --mi-control-sink-scale: .85;    /* Checkbox / RadioButton SinkFeedback */
  --mi-popup-enter-scale: .15;      /* ListPopup reveal starts at 0.15 */
  --mi-popup-scale-range: .85;       /* ListPopup scale = .15 + .85 * fraction */
  --mi-fab-enter-scale: .72;
  --mi-dialog-enter-scale: .8;      /* Window dialog large-screen enter */
  --mi-media-enter-scale: .9;
  --mi-badge-enter-scale: .82;
  --mi-media-preload-scale: 1.015;
  --mi-media-hover-scale: 1.035;
  --mi-fab-hover-scale: 1.05;
  --mi-nav-selected-pressed-alpha: .5;
  --mi-nav-unselected-pressed-alpha: .6;
  --mi-nav-unselected-alpha: .4;
  --mi-disabled-alpha: .35;
  --mi-empty-icon-alpha: .8;

  /* ── Typography (from Miuix TextStyles.kt) ── */
  --fs-title1:    32px;
  --fs-title2:    24px;
  --fs-title3:    20px;  /* TopAppBar small title */
  --fs-title4:    18px;
  --fs-body1:     16px;
  --fs-body2:     14px;  /* subtitle */
  --fs-main:      17px;
  --fs-subtitle:  14px;
  --fs-footnote1: 13px;
  --fs-footnote2: 11px;
  --fs-button:    17px;
  --fs-caption:   13px;  /* footnote1 caption text (quickedit meta) */
  --fs-headline2: 16px;  /* TextStyles.headline2 */

  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ── Component sizing (from Miuix source) ── */
  --topbar-h:      52px;   /* TopAppBarDefaults.CollapsedHeight */
  --topbar-title-pad-x:26px;/* TopAppBarDefaults.TitlePadding */
  --topbar-action-bottom:6px;
  --topbar-menu-top:48px;
  --navbar-h:      64px;   /* NavigationBarDefaults.ItemHeight */
  --searchbar-h:   69px;   /* SearchBar 45dp input + 12dp top/bottom host spacing */
  --navbar-icon:   26px;   /* NavigationBarDefaults.IconSize (26dp) */
  --navbar-label:  12px;   /* NavigationBarDefaults.LabelFontSize (12sp) */
  --navbar-icon-top-pad:8px;/* NavigationBarDefaults.IconTopPadding */
  --navbar-bottom-pad:8px;  /* NavigationBarDefaults.BottomPadding */
  --navbar-pad-x:10px;
  --selection-label-gap:2px;
  --fab-size:      60px;   /* FloatingActionButtonDefaults.MinWidth/MinHeight */
  --fab-shadow:    4px;    /* FloatingActionButtonDefaults.ShadowElevation (4dp) */
  --fab-mobile-bottom-gap:18px;
  --fab-hide-offset-sm:18px;
  --button-min-w:  58px;   /* ButtonDefaults.MinWidth */
  --button-min-h:  40px;   /* ButtonDefaults.MinHeight */
  --button-pad-x:  16px;   /* ButtonDefaults.InsideMargin horizontal */
  --button-pad-y:  13px;   /* ButtonDefaults.InsideMargin vertical */
  --icon-button-size: 40px;/* IconButtonDefaults.MinWidth/MinHeight */
  --icon-size:     24px;   /* Icon default size */
  --searchbar-input-h:45px;/* SearchBarDefaults.InputFieldMinHeight */
  --searchbar-pad-x:12px;  /* SearchBarDefaults.InsideMargin width */
  --search-leading-start:16px;
  --search-leading-end:8px;
  --search-trailing-start:8px;
  --search-trailing-end:16px;
  --menu-min-w:    200px;  /* ListPopupDefaults.MinWidth */
  --menu-max-w:    288px;  /* ListPopup width clamp */
  --menu-min-h:    50px;   /* ListPopupDefaults.MinPopupHeight */
  --menu-item-h:   56px;   /* DropdownDefaults.MinHeight, dialog mode only */
  --menu-item-pad-x:20px;  /* Dropdown horizontal padding */
  --menu-item-pad-y:12px;  /* Dropdown middle vertical padding */
  --menu-edge-pad-y:20px;  /* Dropdown first/last vertical padding */
  --menu-icon:     26px;
  --menu-check:    20px;
  --menu-icon-gap: 12px;   /* DropdownDefaults.IconEndPadding */
  --menu-check-gap:12px;   /* DropdownDefaults.CheckIconStartPadding */
  --menu-text-max: 216px;
  --dialog-max-w:  420px;
  --dialog-margin: 12px;
  --dialog-pad:    24px;
  --dialog-action-gap:20px; /* OverlayDialog confirm example Spacer width */
  --dialog-large-max-h-ratio:.6667;
  --dialog-corner: 28px;   /* Dialog uses Miuix rounded container; compact WindowDialog stays <= BottomSheet radius */
  --snackbar-min-h:48px;
  --snackbar-pad:  12px;
  --snackbar-enter-y:20px;
  --bottom-sheet-max-w:640px;
  --bottom-sheet-pad-x:24px;
  --bottom-sheet-corner:28px; /* SuperBottomSheet cornerRadius */
  --bottom-sheet-handle-w:45px;
  --bottom-sheet-handle-active-w:55px;
  --bottom-sheet-handle-h:4px;
  --bottom-sheet-handle-r:2px;
  --nav-rail-collapsed-w:80px;
  --nav-rail-expanded-w:240px;
  --nav-rail-pad-y:24px;
  --nav-rail-icon:28px;
  --nav-rail-item-w:68px;
  --timeline-rail-w:64px;
  --timeline-rail-w-desktop:82px;
  --content-gap:8px;
  --content-gap-sm:7px;
  --content-gap-md:10px;
  --content-card-pad:16px;
  --content-block-gap:12px;
  --content-pad-desktop:18px;
  --desktop-content-pad-x:22px;
  --fab-scaffold-spacing:12px; /* Scaffold.kt FabSpacing */
  --floating-toolbar-spacing:4px;
  --desktop-edge:28px;
  --selection-mark-size:24px;
  --selection-mark-offset:7px;
  --selection-check-w:8px;
  --selection-check-h:5px;
  --live-badge-size:22px;
  --text-action-size:36px;
  --editor-option-min:76px;
  --editor-option-max:96px;
  --editor-textarea-min-h:128px;
  --editor-dialog-w:520px;
  --editor-dialog-max-h:80vh;
  --editor-dialog-enter-y:40px;
  --upload-icon-size:32px;
  --button-content-gap:6px;
  --empty-pad-y:80px;
  --empty-pad-x:20px;
  --empty-icon-font:34px;
  --empty-desc-max-w:280px;
  --text-dialog-min-h:118px;

  --safe-bottom:   env(safe-area-inset-bottom, 0px);
  --safe-top:      env(safe-area-inset-top, 0px);
  --content-max:    1120px;
  --content-pad:    14px;

  /* ── Font stack ── */
  --font-system:   "MiSans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                   "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei",
                   "Noto Sans SC", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --mi-primary:                #277AF7;
    --mi-on-primary:             #FFFFFF;
    --mi-primary-variant:        #0073DD;
    --mi-on-primary-variant:     #99C7F1;
    --mi-primary-container:      #338FE4;
    --mi-on-primary-container:   #FFFFFF;
    --mi-disabled-primary:       #253E64;
    --mi-disabled-on-primary:    #677993;
    --mi-disabled-primary-button:#253E64;
    --mi-disabled-on-primary-button:#677893;
    --mi-disabled-primary-slider:#44587C;

    --mi-error:                  #F12522;
    --mi-on-error:               #FFFFFF;
    --mi-error-container:        #2E0603;
    --mi-on-error-container:     #FFDAD6;

    --mi-secondary:              #505050;
    --mi-on-secondary:           #FFFFFF;
    --mi-secondary-variant:      #434343;
    --mi-on-secondary-variant:   #D9D9D9;
    --mi-disabled-secondary:     #3F3F3F;
    --mi-disabled-on-secondary:  #797979;
    --mi-disabled-secondary-variant:#404040;
    --mi-disabled-on-secondary-variant:#707170;
    --mi-secondary-container:    #434343;
    --mi-on-secondary-container: #7C7C7C;
    --mi-secondary-container-variant:#4F4F4F;
    --mi-on-secondary-container-variant:#959595;

    --mi-tertiary-container:     #2B3B54;
    --mi-on-tertiary-container:  #4788FF;
    --mi-tertiary-container-variant:#505050;

    --mi-background:             #242424;
    --mi-on-background:          rgba(255,255,255,0.9);
    --mi-on-background-variant:  #787E96;
    --mi-surface:                #242424;
    --mi-on-surface:             #F2F2F2;
    --mi-surface-variant:        #242424;
    --mi-on-surface-secondary:   rgba(255,255,255,0.8);
    --mi-on-surface-summary:     rgba(255,255,255,0.5);
    --mi-on-surface-actions:     rgba(255,255,255,0.4);
    --mi-disabled-on-surface:    #666666;

    --mi-surface-container:          #242424;
    --mi-on-surface-container:       rgba(255,255,255,0.9);
    --mi-on-surface-container-var:   #737373;
    --mi-surface-container-high:     #242424;
    --mi-on-surface-container-high:  #666666;
    --mi-surface-container-highest:  #2D2D2D;
    --mi-on-surface-container-highest:#E9E9E9;

    --mi-outline:                 #404040;
    --mi-divider-line:            #393939;
    --mi-window-dimming:          rgba(0,0,0,0.38);
    --mi-window-backdrop-filter:  blur(14px) saturate(0.9);
    --mi-slider-bg:               rgba(255,255,255,0.15);
    --mi-slider-key-point:        rgba(122,138,166,0.3);
    --mi-slider-key-fg:           #5DAAFF;
    --mi-state-hover:             rgba(255,255,255,0.06);
    --mi-state-focus:             rgba(255,255,255,0.08);
    --mi-state-pressed:           rgba(255,255,255,0.10);
    --mi-primary-state-hover:     rgba(39,122,247,0.06);
    --mi-primary-state-focus:     rgba(39,122,247,0.08);
    --mi-primary-state-pressed:   rgba(39,122,247,0.10);
    --mi-live-shadow:             drop-shadow(0 1px 1px rgba(0,0,0,.72)) drop-shadow(0 0 4px rgba(0,0,0,.34));
    --mi-featured-badge:          #FFD34D;
    --mi-featured-bg:             #332A12;
    --mi-featured-bg-strong:      #5C4816;
    --mi-featured-on-bg:          #FFE7A3;
    --mi-loading-track:           rgba(255,255,255,0.08);
    --mi-sheet-handle-color:      color-mix(in srgb, var(--mi-on-surface-summary) 20%, transparent);
    --mi-translucent-surface:     color-mix(in srgb, var(--mi-background) 78%, transparent);
    --mi-active-tertiary-bg:      color-mix(in srgb, var(--mi-tertiary-container) 78%, transparent);
    --mi-active-tertiary-pressed: color-mix(in srgb, var(--mi-on-primary-variant) 90%, transparent);
    --mi-dialog-overlay:          rgba(0,0,0,0.38);
    --mi-dialog-surface:          #242424;
    --mi-dialog-field:            #303030;
    --mi-dialog-button:           #3A3A3A;
    --mi-dialog-button-pressed:   #4A4A4A;
    --mi-dialog-border:           rgba(255,255,255,0.08);
    --mi-dialog-on-surface:       rgba(255,255,255,0.92);
    --mi-dialog-on-muted:         rgba(255,255,255,0.68);
    --mi-dialog-shadow:           0 12px 36px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
    --mi-error-field:             #3A211F;
    --mi-error-pressed:           #64221E;
  }
}