/**
 * CSS Custom Properties (Design Tokens)
 * Cohiru Lab. Design System
 *
 * Theme: Sky & Sunlight - 空と陽の光をテーマにした明るく穏やかなデザイン
 */

:root {
  /* ===== Colors ===== */
  /* Background - 空を思わせる明るいグラデーション */
  --color-bg-primary: #f0f4f8;       /* 明るいスカイグレー */
  --color-bg-secondary: #ffffff;     /* 白 */
  --color-bg-tertiary: #e8f0f7;      /* 淡いスカイブルー */
  --color-bg-card: rgba(255, 255, 255, 0.9);

  /* Accent - 陽の光と空の色 */
  --color-accent-primary: #e07850;   /* 夕陽のオレンジ */
  --color-accent-primary-hover: #d4663d;
  --color-accent-secondary: #5a9ec9; /* 空のブルー */
  --color-accent-secondary-hover: #4a8ab5;

  /* Text */
  --color-text-primary: #2d3748;     /* 濃いグレー */
  --color-text-secondary: #5a6a7a;   /* ミディアムグレー */
  --color-text-muted: #8899aa;       /* ライトグレー */

  /* Borders */
  --color-border: rgba(45, 55, 72, 0.1);
  --color-border-hover: rgba(45, 55, 72, 0.2);

  /* ===== Typography ===== */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", sans-serif;
  --font-family-heading: "Noto Sans JP", sans-serif;

  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 2rem;     /* 32px */
  --font-size-4xl: 2.5rem;   /* 40px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --line-height-tight: 1.3;
  --line-height-base: 1.7;
  --line-height-loose: 2;

  /* ===== Spacing ===== */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */

  /* ===== Layout ===== */
  --container-max-width: 1200px;
  --container-padding: var(--space-md);

  /* ===== Border Radius ===== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --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 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-glow-primary: 0 0 20px rgba(224, 120, 80, 0.2);
  --shadow-glow-secondary: 0 0 20px rgba(90, 158, 201, 0.2);

  /* ===== Transitions ===== */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ===== Z-index ===== */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 250;
  --z-modal: 300;
  --z-tooltip: 400;

  /* ===== Social Media Brand Colors ===== */
  --color-social-x: #000000;
  --color-social-booth: #fc4d50;
  --color-social-bluesky: #0085ff;
  --color-social-youtube: #ff0000;
  --color-social-niconico: #252525;

  /* ===== Status Colors ===== */
  --status-open: #10b981;
  --status-open-bg: rgba(16, 185, 129, 0.1);
  --status-busy: #f59e0b;
  --status-busy-bg: rgba(245, 158, 11, 0.1);
  --status-closed: #ef4444;
  --status-closed-bg: rgba(239, 68, 68, 0.1);

  /* ===== Easing Functions ===== */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ===== ReDICE Specific Colors ===== */
/* Theme: Ethereal Unease - 透明感と不穏さの共存 */
:root {
  --redice-bg: #f5f8fa;              /* 霧がかった白 */
  --redice-bg-secondary: #eaf1f5;    /* 淡いグレイッシュブルー */
  --redice-bg-overlay: rgba(245, 248, 250, 0.95);
  --redice-accent-red: #b85450;      /* くすんだ赤（血の記憶） */
  --redice-accent-red-hover: #a34440;
  --redice-accent-cyan: #6ba3b8;     /* 儚い水色（透明感） */
  --redice-accent-cyan-muted: #7eb5c8;
  --redice-text: #3a4550;            /* 深いグレー */
  --redice-text-muted: #6a7a8a;      /* ミディアムグレー */
  --redice-border: rgba(107, 163, 184, 0.3);
  --redice-shadow: rgba(58, 69, 80, 0.1);

  /* Character dialogue colors for omake page */
  --char-astera: #ffd700;
  --char-nina: #e53935;
  --char-hina: #1e88e5;
  --char-caron: #8e24aa;
  --char-eleonora: #43a047;
}