/* ===========================================================
   tokens.css — Design Tokens
   3日でええやん 公式HP
   =========================================================== */

:root {
  /* ---- Color Scheme（Light + Dark 両対応） ---- */
  color-scheme: light dark;

  /* ---- Light Mode（デフォルト） ---- */
  --color-navy:        #1B2A4A;
  --color-navy-mid:    #2E4270;
  --color-gold:        #B8976A;
  --color-muted-gold:  #9E7E55;
  --color-cream:       #F5F0E8;
  --color-charcoal:    #2D2D2D;
  --color-warm-white:  #FDFAF5;
  --color-gold-pale:   #E8D9C0;
  /* gold（小さな本文テキスト用・WCAG AA達成）: warm-white 5.1:1 / cream 4.75:1 */
  --color-gold-text:   #836540;

  /* ---- Semantic ---- */
  --color-text:        var(--color-charcoal);
  --color-text-muted:  #5A5A5A;
  --color-bg:          var(--color-warm-white);
  --color-bg-alt:      var(--color-cream);
  --color-border:      var(--color-gold-pale);
  --color-link:        var(--color-navy);
  --color-link-hover:  var(--color-gold);
  /* gold背景に常時のる濃紺インク（light/dark両モードで固定・WCAG AA達成） */
  --color-on-gold:     #1B2A4A;   /* gold上：light 5.19:1 / dark 7.15:1 */
  /* エラー文字色（テーマ別・本文サイズでAA達成） */
  --color-error:       #A03A3A;   /* warm-white 6.3:1 / cream 5.7:1 */

  /* ---- Typography ---- */
  --font-serif-en: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-serif-ja: 'Noto Serif JP', '游明朝', 'Yu Mincho', 'YuMincho', serif;
  --font-sans-ja:  'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', sans-serif;

  --text-h1:    clamp(1.75rem, 3.5vw, 2.75rem);
  --text-h2:    clamp(1.625rem, 3.2vw, 2.375rem);
  --text-h3:    clamp(1.125rem, 2vw, 1.5rem);
  --text-body:  1rem;
  --text-small: 0.875rem;
  --text-xs:    0.75rem;

  --leading-tight: 1.4;
  --leading-base:  1.85;
  --leading-loose: 2;

  --tracking-wide:  0.08em;
  --tracking-wider: 0.2em;

  /* ---- Spacing ---- */
  --space-section-sm: clamp(64px,  8vw,  96px);
  --space-section-md: clamp(96px, 12vw, 160px);
  --space-section-lg: clamp(128px, 16vw, 220px);

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;

  /* ---- Layout ---- */
  --container-max: 1120px;
  --container-px:  clamp(20px, 6vw, 80px);

  /* ---- UI ---- */
  --border-thin:    1px solid var(--color-border);
  --border-thinner: 0.5px solid var(--color-border);

  /* ---- Easing（uxui-designer指示：固有の体温を設計） ---- */
  --ease-out-expo:     cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --transition-base:   300ms var(--ease-out-expo);
  --transition-fast:   180ms var(--ease-out-expo);
  --transition-slow:   560ms var(--ease-in-out-quart);

  /* ---- z-index ---- */
  --z-base:     1;
  --z-sticky:   100;
  --z-overlay:  900;
  --z-modal:    1000;

  /* ---- Header（theme対応・transparent base） ---- */
  --color-header-bg:     rgba(253, 250, 245, 0.92);
  --color-header-border: var(--color-gold-pale);
  --color-cta-text:      var(--color-gold);

  /* ---- Floating CTA（WCAG 2.2 AA/AAA達成・アクセシビリティ専門家推奨） ---- */
  --floating-cta-bg:     #1B2A4A;   /* navy */
  --floating-cta-text:   #FDFAF5;   /* warm-white：コントラスト比13:1（AAA達成） */
  --floating-cta-border: #B8976A;   /* gold（ボーダーで高級感維持） */
  --floating-cta-icon:   #B8976A;   /* goldアイコン（差し色） */
}

/* ====================================================
   Dark Mode
   優先順位：[data-theme="dark"] > prefers-color-scheme: dark
            （ユーザーの手動切替が常に最優先）
   ==================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-navy:        #E8DCC2;
    --color-navy-mid:    #BFB088;
    --color-gold:        #D4B381;
    --color-muted-gold:  #B89B6E;
    --color-cream:       #1F2638;
    --color-charcoal:    #E8E6E1;
    --color-warm-white:  #131826;
    --color-gold-pale:   #3A4258;
    --color-gold-text:   #C9A878;   /* ダーク背景で可読なゴールド（6:1超） */

    --color-text:        var(--color-charcoal);
    --color-text-muted:  #9CA0AC;
    --color-bg:          var(--color-warm-white);
    --color-bg-alt:      var(--color-cream);
    --color-border:      var(--color-gold-pale);
    --color-link:        var(--color-gold);
    --color-link-hover:  var(--color-gold-pale);
    --color-error:       #E89B9B;   /* dark-bg 8.0:1 */

    --color-header-bg:     rgba(19, 24, 38, 0.88);
    --color-header-border: rgba(232, 220, 194, 0.08);
    --color-cta-text:      #131826;     /* 薄ゴールド背景に深紺文字で高コントラスト */

    /* Floating CTA（ダークモード：WCAG AAA達成） */
    --floating-cta-bg:     #2E4270;   /* navy-mid */
    --floating-cta-text:   #F5F0E8;   /* cream：コントラスト比8.9:1（AAA） */
    --floating-cta-border: #D4B381;   /* gold（ダーク値） */
    --floating-cta-icon:   #D4B381;
  }
}
:root[data-theme="dark"] {
  --color-navy:        #E8DCC2;
  --color-navy-mid:    #BFB088;
  --color-gold:        #D4B381;
  --color-muted-gold:  #B89B6E;
  --color-cream:       #1F2638;
  --color-charcoal:    #E8E6E1;
  --color-warm-white:  #131826;
  --color-gold-pale:   #3A4258;
  --color-gold-text:   #C9A878;

  --color-text:        var(--color-charcoal);
  --color-text-muted:  #9CA0AC;
  --color-bg:          var(--color-warm-white);
  --color-bg-alt:      var(--color-cream);
  --color-border:      var(--color-gold-pale);
  --color-link:        var(--color-gold);
  --color-link-hover:  var(--color-gold-pale);
  --color-error:       #E89B9B;   /* dark-bg 8.0:1 */

  --color-header-bg:     rgba(19, 24, 38, 0.88);
  --color-header-border: rgba(232, 220, 194, 0.08);
  --color-cta-text:      #131826;

  /* Floating CTA（ダークモード手動切替） */
  --floating-cta-bg:     #2E4270;
  --floating-cta-text:   #F5F0E8;
  --floating-cta-border: #D4B381;
  --floating-cta-icon:   #D4B381;
}