/* Material Design 3 Color Tokens */
/* Based on Material Design 3 Color System */

:root {
  /* ============================================
     Primary Color Scheme
     ============================================ */
  --md-sys-color-primary: #1B2CE0;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #DCE0FF;
  --md-sys-color-on-primary-container: #161FA0;

  /* btn-primary: #FFF on #1B2CE0 (ultramarine 藍) は AA pass (約 8:1)。 */
  --btn-primary-bg: #1B2CE0;
  --btn-primary-bg-hover: #1320A8;

  /* ============================================
     Editorial palette (2026 redesign)
     藍 ultramarine + sky + ink/paper。 hero.css / index.vue が参照。
     ============================================ */
  --ink: #121312;
  --ink-soft: #46453f;
  --paper: #EEF0EA;
  --blue: #1B2CE0;
  --blue-deep: #1320A8;
  --sky: #6E8BFF;
  --sky-soft: #A9BCFF;

  /* ============================================
     Secondary Color Scheme
     ============================================ */
  --md-sys-color-secondary: #9FD9F6;
  --md-sys-color-on-secondary: #263238;
  --md-sys-color-secondary-container: #E2F2FC;
  --md-sys-color-on-secondary-container: #212121;

  /* ============================================
     Tertiary Color Scheme
     ============================================ */
  --md-sys-color-tertiary: #FFAA71;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FFB4A3;
  --md-sys-color-on-tertiary-container: #212121;

  /* ============================================
     Error Color Scheme
     ============================================ */
  --md-sys-color-error: #EF4444;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FEE2E2;
  --md-sys-color-on-error-container: #991B1B;

  /* ============================================
     Success Color Scheme (Extended)
     ============================================ */
  --md-sys-color-success: #10B981;
  --md-sys-color-on-success: #FFFFFF;
  --md-sys-color-success-container: #DCFCE7;
  --md-sys-color-on-success-container: #065F46;

  /* ============================================
     Warning Color Scheme (Extended)
     ============================================ */
  --md-sys-color-warning: #F59E0B;
  --md-sys-color-on-warning: #FFFFFF;
  --md-sys-color-warning-container: #FEF3C7;
  --md-sys-color-on-warning-container: #92400E;

  /* ============================================
     Surface Colors
     ============================================ */
  --md-sys-color-surface: #FAFAFA;
  --md-sys-color-on-surface: #2d3748;
  --md-sys-color-surface-variant: #F5F5F5;
  --md-sys-color-on-surface-variant: #718096;

  /* ============================================
     Background Colors
     ============================================ */
  --md-sys-color-background: #FFFFFF;
  --md-sys-color-on-background: #212121;

  /* ============================================
     Outline Colors
     ============================================ */
  --md-sys-color-outline: #DEDEDE;
  --md-sys-color-outline-variant: #EBEBEB;

  /* ============================================
     Legacy Compatibility Mappings
     ============================================ */
  --primary: var(--md-sys-color-primary);
  --primary-dark: #1320A8;
  --primary-light: #5468EC;

  --accent: var(--md-sys-color-secondary);
  --accent-cyan: #9FD9F6;
  --accent-coral: #F3BCAA;
  --accent-salmon: #FFB4A3;
  --accent-peach: var(--md-sys-color-tertiary);

  --text-primary: var(--md-sys-color-on-background);
  --text-secondary: #263238;
  --text-body: var(--md-sys-color-on-surface-variant);
  --text-dark: #212121;
  --text-medium: #636363;
  --text-light: #757575;
  --text-muted: #757575;

  --border-light: var(--md-sys-color-outline-variant);
  --border-medium: var(--md-sys-color-outline);

  --background: var(--md-sys-color-surface);
  --background-light: var(--md-sys-color-background);
  --background-off-white: var(--md-sys-color-surface-variant);
  --background-gray: #F0F0F0;

  --bg-blue-lightest: #F1F9FE;
  --bg-blue-light: var(--md-sys-color-secondary-container);
  --bg-blue-medium: var(--md-sys-color-primary-container);

  --success: var(--md-sys-color-success);
  --warning: var(--md-sys-color-warning);
  --danger: var(--md-sys-color-error);

  /* ============================================
     Shape Tokens
     ============================================ */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* Legacy radius mappings */
  --radius: var(--md-sys-shape-corner-small);
  --radius-md: var(--md-sys-shape-corner-extra-small);
  --radius-sm: 1px;

  /* ============================================
     Container Tokens
     ============================================ */
  --container-max-width: 1200px;
}