/* ============================================
   東光化学 WordPress Theme - Design System
   ASUS-inspired premium design tokens
   ============================================ */

:root {
  /* ── Brand Colors ── */
  --primary:          #0a1628;
  --primary-light:    #1a2d4a;
  --primary-mid:      #132240;
  --accent:           #00a0aa;
  --accent-hover:     #00bfc9;
  --accent-light:     #4dd0e1;
  --accent-glow:      rgba(0, 160, 170, 0.25);

  /* ── Neutral Palette ── */
  --white:            #ffffff;
  --off-white:        #f8f9fa;
  --bg-light:         #f0f2f5;
  --bg-section:       #e8ecf0;
  --border-light:     #dde1e6;
  --border:           #c4c9d0;
  --text-dark:        #1a1a2e;
  --text-body:        #3a3a4a;
  --text-muted:       #6c7589;
  --text-light:       #9ca3af;
  --text-on-dark:     #e0e4e8;
  --text-on-dark-muted: #8b95a5;

  /* ── Semantic Colors ── */
  --success:          #10b981;
  --warning:          #f59e0b;
  --danger:           #ef4444;
  --info:             #3b82f6;

  /* ── Gradients ── */
  --gradient-hero:    linear-gradient(135deg, #0a1628 0%, #1a2d4a 50%, #0d1f3c 100%);
  --gradient-card:    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
  --gradient-accent:  linear-gradient(135deg, #00a0aa 0%, #0080a0 100%);
  --gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);

  /* ── Typography ── */
  --font-heading:     'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
  --font-body:        'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
  --font-display:     'Inter', 'Noto Sans JP', sans-serif;
  --font-mono:        'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes (fluid) */
  --text-xs:          0.75rem;    /* 12px */
  --text-sm:          0.875rem;   /* 14px */
  --text-base:        1rem;       /* 16px */
  --text-lg:          1.125rem;   /* 18px */
  --text-xl:          1.25rem;    /* 20px */
  --text-2xl:         1.5rem;     /* 24px */
  --text-3xl:         1.875rem;   /* 30px */
  --text-4xl:         2.25rem;    /* 36px */
  --text-5xl:         3rem;       /* 48px */
  --text-6xl:         3.75rem;    /* 60px */
  --text-7xl:         4.5rem;     /* 72px */

  /* Font Weights */
  --fw-light:         300;
  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-extrabold:     800;

  /* Line Heights */
  --lh-tight:         1.2;
  --lh-normal:        1.6;
  --lh-relaxed:       1.8;

  /* Letter Spacing */
  --ls-tight:         -0.02em;
  --ls-normal:        0;
  --ls-wide:          0.05em;
  --ls-wider:         0.1em;

  /* ── Spacing Scale ── */
  --space-1:          0.25rem;    /* 4px */
  --space-2:          0.5rem;     /* 8px */
  --space-3:          0.75rem;    /* 12px */
  --space-4:          1rem;       /* 16px */
  --space-5:          1.25rem;    /* 20px */
  --space-6:          1.5rem;     /* 24px */
  --space-8:          2rem;       /* 32px */
  --space-10:         2.5rem;     /* 40px */
  --space-12:         3rem;       /* 48px */
  --space-16:         4rem;       /* 64px */
  --space-20:         5rem;       /* 80px */
  --space-24:         6rem;       /* 96px */

  /* ── Layout ── */
  --container-max:    1400px;
  --container-wide:   1200px;
  --container-narrow: 900px;
  --header-height:    72px;
  --topbar-height:    36px;

  /* ── Borders & Radius ── */
  --radius-sm:        4px;
  --radius-md:        8px;
  --radius-lg:        12px;
  --radius-xl:        16px;
  --radius-2xl:       24px;
  --radius-full:      9999px;

  /* ── Shadows ── */
  --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:        0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl:        0 16px 48px rgba(0, 0, 0, 0.15);
  --shadow-card:      0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.1), 0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-glow:      0 0 20px var(--accent-glow);

  /* ── Transitions ── */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:    150ms;
  --duration-normal:  300ms;
  --duration-slow:    500ms;
  --duration-slower:  800ms;

  /* ── Z-Index Scale ── */
  --z-base:           1;
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-overlay:        300;
  --z-modal:          400;
  --z-toast:          500;
}

/* ── Dark Section Override ── */
.section-dark {
  --text-dark:        #ffffff;
  --text-body:        #e0e4e8;
  --text-muted:       #8b95a5;
}