/* ============================================================
   Workstyle Evolution — Design Tokens
   ============================================================ */
:root {
  /* ---------- Brand Colors ---------- */
  --we-navy-900: #000B24;
  --we-navy-800: #001848;
  --we-navy-700: #062868;
  --we-blue-600: #1848A8;  /* Primary brand blue */
  --we-blue-500: #2D6BD4;
  --we-blue-400: #4890E0;
  --we-blue-300: #6BB0EE;
  --we-blue-200: #A8D0F5;
  --we-blue-100: #D6E8FA;
  --we-blue-050: #EEF5FD;

  --we-sky-500:  #48A8FF;  /* Bright accent */
  --we-sky-400:  #6BBFFF;

  --we-teal-600: #009E96;  /* CTA accent (お問い合わせ系) */
  --we-teal-500: #00B8B0;
  --we-teal-400: #2DCEC5;

  /* ---------- Neutrals ---------- */
  --we-ink-900: #0A0E1A;
  --we-ink-800: #161B29;
  --we-ink-700: #2A3142;
  --we-ink-600: #4A5266;
  --we-ink-500: #6B7284;
  --we-ink-400: #8E94A3;
  --we-ink-300: #B4B9C4;
  --we-ink-200: #D6D9E0;
  --we-ink-100: #E8EAEF;
  --we-ink-050: #F4F5F8;
  --we-white:   #FFFFFF;

  /* ---------- Semantic ---------- */
  --we-success: #1BA85C;
  --we-warning: #E8A317;
  --we-danger:  #D94D4D;
  --we-info:    var(--we-blue-500);

  /* ---------- Gradients ---------- */
  --we-grad-brand: linear-gradient(135deg, #001848 0%, #1848A8 50%, #48A8FF 100%);
  --we-grad-sky:   linear-gradient(135deg, #1848A8 0%, #48A8FF 100%);
  --we-grad-deep:  linear-gradient(180deg, #000B24 0%, #001848 60%, #062868 100%);
  --we-grad-mesh:
    radial-gradient(at 20% 20%, rgba(72,168,255,0.25) 0, transparent 45%),
    radial-gradient(at 80% 10%, rgba(24,72,168,0.30) 0, transparent 50%),
    radial-gradient(at 50% 90%, rgba(0,184,176,0.15) 0, transparent 55%),
    linear-gradient(180deg, #001848 0%, #000B24 100%);

  /* ---------- Typography ---------- */
  --we-font-sans: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", system-ui, sans-serif;
  --we-font-display: "Orbitron", "Inter", "Noto Sans JP", system-ui, sans-serif;
  --we-font-mono: "JetBrains Mono", "SF Mono", "Consolas", monospace;

  /* Type scale (8pt base) */
  --we-text-xs:   12px;
  --we-text-sm:   14px;
  --we-text-base: 16px;
  --we-text-md:   18px;
  --we-text-lg:   20px;
  --we-text-xl:   24px;
  --we-text-2xl:  32px;
  --we-text-3xl:  40px;
  --we-text-4xl:  56px;
  --we-text-5xl:  72px;

  --we-leading-tight:  1.2;
  --we-leading-snug:   1.4;
  --we-leading-normal: 1.6;
  --we-leading-loose:  1.8;

  --we-tracking-tight:  -0.02em;
  --we-tracking-normal: 0;
  --we-tracking-wide:    0.04em;
  --we-tracking-wider:   0.12em;

  /* ---------- Spacing (4pt base) ---------- */
  --we-space-0:  0;
  --we-space-1:  4px;
  --we-space-2:  8px;
  --we-space-3:  12px;
  --we-space-4:  16px;
  --we-space-5:  20px;
  --we-space-6:  24px;
  --we-space-8:  32px;
  --we-space-10: 40px;
  --we-space-12: 48px;
  --we-space-16: 64px;
  --we-space-20: 80px;
  --we-space-24: 96px;

  /* ---------- Radii ---------- */
  --we-radius-none: 0;
  --we-radius-sm: 4px;
  --we-radius-md: 8px;
  --we-radius-lg: 12px;
  --we-radius-xl: 16px;
  --we-radius-2xl: 24px;
  --we-radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --we-shadow-xs: 0 1px 2px rgba(0, 24, 72, 0.06);
  --we-shadow-sm: 0 2px 6px rgba(0, 24, 72, 0.08);
  --we-shadow-md: 0 6px 16px rgba(0, 24, 72, 0.10);
  --we-shadow-lg: 0 16px 40px rgba(0, 24, 72, 0.14);
  --we-shadow-xl: 0 28px 72px rgba(0, 24, 72, 0.18);
  --we-shadow-glow: 0 0 0 4px rgba(72, 168, 255, 0.20);

  /* ---------- Motion ---------- */
  --we-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --we-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --we-dur-fast: 140ms;
  --we-dur-base: 220ms;
  --we-dur-slow: 360ms;

  /* ---------- Layout ---------- */
  --we-container: 1200px;
  --we-border: 1px solid var(--we-ink-100);

  /* ---------- Semantic surface tokens (light) ---------- */
  --we-bg-app:     #F4F5F8;
  --we-bg-surface: #FFFFFF;
  --we-bg-subtle:  #F4F5F8;
  --we-bg-inset:   #EEF5FD;
  --we-fg-default: #0A0E1A;
  --we-fg-muted:   #4A5266;
  --we-fg-subtle:  #6B7284;
  --we-border-default: #E8EAEF;
  --we-border-strong:  #D6D9E0;
  --we-brand:      #1848A8;
  --we-brand-hover:#2D6BD4;
  --we-on-brand:   #FFFFFF;
  --we-code-bg:    #000B24;
  --we-code-fg:    #CFE4FF;
}