// ============================================================
// Yuto Water H5 — Design Tokens
// Water-blue theme · Mobile-first · Dark mode ready
// ============================================================

// ── Brand Colors ────────────────────────────────────────────
$color-primary:        #1E74FF;
$color-primary-light:  #64B5F6;
$color-primary-dark:   #1A3973;
$color-primary-bg:     #E3F2FD;

$color-success:        #07C160;
$color-success-light:  #69E09E;
$color-success-dark:   #06AD56;
$color-success-bg:     #E8F8EF;

$color-warning:        #FF976A;
$color-warning-light:  #FFB899;
$color-warning-dark:   #ED7A4C;
$color-warning-bg:     #FFF3ED;

$color-danger:         #EE0A24;
$color-danger-light:   #F56C6C;
$color-danger-dark:    #D0091F;
$color-danger-bg:      #FDECEC;

// ── Neutral Colors ──────────────────────────────────────────
$color-white:          #FFFFFF;
$color-gray-1:         #F7F8FA;
$color-gray-2:         #F2F3F5;
$color-gray-3:         #EBEDF0;
$color-gray-4:         #DCDFE6;
$color-gray-5:         #C8C9CC;
$color-gray-6:         #969799;
$color-gray-7:         #646566;
$color-gray-8:         #323233;

$color-black:          #1A1A1A;

// ── Text Colors ─────────────────────────────────────────────
$color-text-primary:   $color-gray-8;
$color-text-regular:   $color-gray-7;
$color-text-secondary: $color-gray-6;
$color-text-placeholder:$color-gray-5;
$color-text-inverse:   $color-white;

// ── Background Colors ───────────────────────────────────────
$color-bg-page:        #F4F7F8;
$color-bg-card:        $color-white;
$color-bg-elevated:    $color-white;
$color-bg-mask:        rgba(0, 0, 0, 0.6);

// ── Border Colors ───────────────────────────────────────────
$color-border:         $color-gray-3;
$color-border-light:   $color-gray-2;
$color-border-dark:    $color-gray-4;

// ── Font Family ─────────────────────────────────────────────
$font-family-base:     -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
                       'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue',
                       Helvetica, Arial, sans-serif;
$font-family-number:   'SF Mono', 'Menlo', 'Consolas', 'Courier New', monospace;

// ── Font Sizes (mobile-first modular scale) ────────────────
$font-size-xs:         10px;
$font-size-sm:         12px;
$font-size-base:       14px;
$font-size-md:         16px;
$font-size-lg:         18px;
$font-size-xl:         20px;
$font-size-xxl:        24px;
$font-size-xxxl:       30px;

// ── Font Weights ────────────────────────────────────────────
$font-weight-light:    300;
$font-weight-regular:  400;
$font-weight-medium:   500;
$font-weight-semibold: 600;
$font-weight-bold:     700;

// ── Line Heights ────────────────────────────────────────────
$line-height-tight:    1.2;
$line-height-normal:   1.4;
$line-height-relaxed:  1.6;
$line-height-loose:    1.8;

// ── Spacing Scale (4px base) ───────────────────────────────
$spacing-xxs:          4px;
$spacing-xs:           8px;
$spacing-sm:           12px;
$spacing-md:           16px;
$spacing-lg:           20px;
$spacing-xl:           24px;
$spacing-xxl:          32px;
$spacing-xxxl:         48px;

// ── Border Radius ───────────────────────────────────────────
$radius-sm:            4px;
$radius-md:            8px;
$radius-lg:            12px;
$radius-xl:            16px;
$radius-round:         999px;
$radius-circle:        50%;

// ── Shadows ─────────────────────────────────────────────────
$shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.05);
$shadow-md:            0 2px 8px rgba(0, 0, 0, 0.08);
$shadow-lg:            0 4px 16px rgba(0, 0, 0, 0.1);
$shadow-xl:            0 8px 24px rgba(0, 0, 0, 0.12);

// ── Z-Index Scale ───────────────────────────────────────────
$z-index-dropdown:     1000;
$z-index-sticky:       1020;
$z-index-fixed:        1030;
$z-index-modal-backdrop:1040;
$z-index-modal:        1050;
$z-index-popover:      1060;
$z-index-tooltip:      1070;
$z-index-toast:        1080;

// ── Transitions ─────────────────────────────────────────────
$transition-fast:      0.15s ease;
$transition-base:      0.3s ease;
$transition-slow:      0.5s ease;

// ── Layout ──────────────────────────────────────────────────
$max-width-mobile:     750px;
$safe-area-inset-top:  env(safe-area-inset-top, 0px);
$safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);

// ════════════════════════════════════════════════════════════
// CSS Custom Properties (for runtime theme switching)
// ════════════════════════════════════════════════════════════

:root {
  // Brand
  --color-primary:        #{$color-primary};
  --color-primary-light:  #{$color-primary-light};
  --color-primary-dark:   #{$color-primary-dark};
  --color-primary-bg:     #{$color-primary-bg};

  --color-success:        #{$color-success};
  --color-success-light:  #{$color-success-light};
  --color-success-dark:   #{$color-success-dark};
  --color-success-bg:     #{$color-success-bg};

  --color-warning:        #{$color-warning};
  --color-warning-light:  #{$color-warning-light};
  --color-warning-dark:   #{$color-warning-dark};
  --color-warning-bg:     #{$color-warning-bg};

  --color-danger:         #{$color-danger};
  --color-danger-light:   #{$color-danger-light};
  --color-danger-dark:    #{$color-danger-dark};
  --color-danger-bg:      #{$color-danger-bg};

  // Text
  --color-text-primary:   #{$color-text-primary};
  --color-text-regular:   #{$color-text-regular};
  --color-text-secondary: #{$color-text-secondary};
  --color-text-placeholder: #{$color-text-placeholder};
  --color-text-inverse:   #{$color-text-inverse};

  // Backgrounds
  --color-bg-page:        #{$color-bg-page};
  --color-bg-card:        #{$color-bg-card};
  --color-bg-elevated:    #{$color-bg-elevated};
  --color-bg-mask:        #{$color-bg-mask};

  // Borders
  --color-border:         #{$color-border};
  --color-border-light:   #{$color-border-light};
  --color-border-dark:    #{$color-border-dark};

  // Shadows
  --shadow-sm:            #{$shadow-sm};
  --shadow-md:            #{$shadow-md};
  --shadow-lg:            #{$shadow-lg};
  --shadow-xl:            #{$shadow-xl};

  // Radii
  --radius-sm:            #{$radius-sm};
  --radius-md:            #{$radius-md};
  --radius-lg:            #{$radius-lg};
  --radius-xl:            #{$radius-xl};
  --radius-round:         #{$radius-round};

  // Spacing
  --spacing-xxs:          #{$spacing-xxs};
  --spacing-xs:           #{$spacing-xs};
  --spacing-sm:           #{$spacing-sm};
  --spacing-md:           #{$spacing-md};
  --spacing-lg:           #{$spacing-lg};
  --spacing-xl:           #{$spacing-xl};
  --spacing-xxl:          #{$spacing-xxl};
  --spacing-xxxl:         #{$spacing-xxxl};

  // Font
  --font-size-xs:         #{$font-size-xs};
  --font-size-sm:         #{$font-size-sm};
  --font-size-base:       #{$font-size-base};
  --font-size-md:         #{$font-size-md};
  --font-size-lg:         #{$font-size-lg};
  --font-size-xl:         #{$font-size-xl};
  --font-size-xxl:        #{$font-size-xxl};
  --font-size-xxxl:       #{$font-size-xxxl};

  // Transitions
  --transition-fast:      #{$transition-fast};
  --transition-base:      #{$transition-base};
  --transition-slow:      #{$transition-slow};
}

// ── Dark Mode ───────────────────────────────────────────────

// Dark theme variable mapping (defined first so it can be @included below)
@mixin dark-theme-vars {
  // Brand — slightly softened for dark backgrounds
  --color-primary:        #42A5F5;
  --color-primary-light:  #90CAF9;
  --color-primary-dark:   #1E88E5;
  --color-primary-bg:     #0D2137;

  --color-success:        #07C160;
  --color-success-light:  #69E09E;
  --color-success-dark:   #06AD56;
  --color-success-bg:     #0D2818;

  --color-warning:        #FF976A;
  --color-warning-light:  #FFB899;
  --color-warning-dark:   #ED7A4C;
  --color-warning-bg:     #2B1A10;

  --color-danger:         #EE0A24;
  --color-danger-light:   #F56C6C;
  --color-danger-dark:    #D0091F;
  --color-danger-bg:      #2B0D10;

  // Text — inverted hierarchy
  --color-text-primary:   #E5E5E5;
  --color-text-regular:   #B3B3B3;
  --color-text-secondary: #8C8C8C;
  --color-text-placeholder: #666666;
  --color-text-inverse:   #1A1A1A;

  // Backgrounds
  --color-bg-page:        #0F0F0F;
  --color-bg-card:        #1A1A1A;
  --color-bg-elevated:    #242424;
  --color-bg-mask:        rgba(0, 0, 0, 0.7);

  // Borders
  --color-border:         #2E2E2E;
  --color-border-light:   #242424;
  --color-border-dark:    #3A3A3A;

  // Shadows — darker for dark mode
  --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:            0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg:            0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-xl:            0 8px 24px rgba(0, 0, 0, 0.6);
}

// 1) System preference (auto)
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    @include dark-theme-vars;
  }
}

// 2) Explicit [data-theme='dark'] override
[data-theme='dark'] {
  @include dark-theme-vars;
}
