/* =========================================================================
   Ponté Champagne Lounge — theme.css
   ANBYスライドテンプレートの「型」を、Pontéのブランドに合わせた設定です。
   色・書体・文字サイズ・余白・動きは、このファイルの変数だけで全体を変えられます。
   ========================================================================= */

:root {
  /* ---------- Brand colors（Ponté HP の配色をもとに） ---------- */
  --c-brand:        #2A2117;  /* 漆・ダークウッドのような焦げ茶（章扉など） */
  --c-brand-deep:   #100C08;
  --c-brand-light:  #3D2F1F;
  --c-brand-bright: #C9A468;  /* シャンパンゴールド（アクセント） */
  --c-brand-glow:   #E8D9B5;  /* 月あかり */
  --c-gold:         #C9A468;
  --c-red:          #96524A;  /* 生ハムスライサーの赤（ごく控えめに） */

  /* ---------- Neutrals ---------- */
  --c-ink:    #0C0A07;        /* ベースの黒（温かみのある黒） */
  --c-ink-2:  #14110C;
  --c-ink-3:  #1C1812;
  --c-paper:  #F3EEE4;        /* アイボリー */
  --c-paper-2:#E8E0D0;
  --c-white:  #FFFFFF;
  --c-navy-text: #1C1812;     /* 明るい背景上の文字色 */

  /* ---------- Glow & shadow ---------- */
  --glow:         rgba(232, 200, 140, .30);
  --glow-soft:    rgba(232, 200, 140, .18);
  --glow-deep:    rgba(90, 60, 25, .5);
  --shadow-brand: rgba(30, 20, 8, .45);

  /* ---------- Typography ---------- */
  --f-mincho:   "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --f-gothic:   "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --f-serif-en: "Cormorant Garamond", "Times New Roman", serif;
  --f-sans-en:  "Manrope", "Helvetica Neue", Arial, sans-serif;

  --fs-hero:  128px;
  --fs-h1:    84px;
  --fs-h2:    60px;
  --fs-h3:    38px;
  --fs-h4:    28px;
  --fs-lead:  28px;
  --fs-body:  23px;
  --fs-small: 19px;
  --fs-label: 15px;

  /* ---------- Layout ---------- */
  --pad-x: 140px;
  --pad-y: 112px;
  --gap-s: 16px;
  --gap-m: 32px;
  --gap-l: 56px;
  --gap-xl: 96px;
  --radius: 2px;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur:         1200ms;
  --dur-slide:   800ms;
  --stagger:     110ms;
}

/* =========================================================================
   Tone — スライドごとの配色（<section data-tone="dark|light|brand">）
   ========================================================================= */
.slide,
.slide[data-tone="dark"] {
  --bg:          var(--c-ink);
  --fg:          #F1EADC;
  --fg-2:        rgba(241, 234, 220, .74);
  --fg-3:        rgba(241, 234, 220, .48);
  --line:        rgba(232, 217, 181, .14);
  --line-strong: rgba(232, 217, 181, .32);
  --accent:      var(--c-brand-bright);
  --accent-soft: rgba(201, 164, 104, .2);
  --surface:     rgba(255, 245, 225, .035);
  --surface-2:   rgba(255, 245, 225, .07);
  --bg-image:
    radial-gradient(1000px 720px at 86% -10%, rgba(201, 164, 104, .16), transparent 62%),
    radial-gradient(900px 700px at -8% 110%, rgba(90, 60, 25, .28), transparent 60%),
    linear-gradient(180deg, var(--c-ink-2), var(--c-ink));
  --logo-white: block;
  --logo-blue:  none;
  color-scheme: dark;
}

.slide[data-tone="light"] {
  --bg:          var(--c-paper);
  --fg:          var(--c-navy-text);
  --fg-2:        rgba(28, 24, 18, .74);
  --fg-3:        rgba(28, 24, 18, .5);
  --line:        rgba(28, 24, 18, .12);
  --line-strong: rgba(28, 24, 18, .28);
  --accent:      #94743F;      /* アイボリー上で読めるゴールド */
  --accent-soft: rgba(201, 164, 104, .22);
  --surface:     #FBF8F2;
  --surface-2:   #FFFFFF;
  --bg-image:
    radial-gradient(1000px 700px at 100% 0%, rgba(201, 164, 104, .12), transparent 60%),
    linear-gradient(180deg, #F7F3EB, var(--c-paper));
  --logo-white: none;
  --logo-blue:  block;
  color-scheme: light;
}

.slide[data-tone="brand"] {
  --bg:          var(--c-brand);
  --fg:          #F6EFDF;
  --fg-2:        rgba(246, 239, 223, .8);
  --fg-3:        rgba(246, 239, 223, .55);
  --line:        rgba(232, 217, 181, .2);
  --line-strong: rgba(232, 217, 181, .42);
  --accent:      var(--c-brand-glow);
  --accent-soft: rgba(232, 217, 181, .14);
  --surface:     rgba(255, 245, 225, .05);
  --surface-2:   rgba(255, 245, 225, .1);
  --bg-image:
    radial-gradient(900px 900px at 78% 38%, rgba(232, 200, 140, .22), transparent 58%),
    radial-gradient(1000px 800px at 0% 100%, rgba(8, 6, 3, .7), transparent 65%),
    linear-gradient(135deg, var(--c-brand-light) 0%, var(--c-brand) 46%, var(--c-brand-deep) 100%);
  --logo-white: block;
  --logo-blue:  none;
  color-scheme: dark;
}

.slide.is-gold,
.is-gold {
  --accent:      var(--c-gold);
  --accent-soft: rgba(201, 164, 104, .16);
}

/* =========================================================================
   Presets — デッキ全体の配色テーマ（<html data-preset="...">、Tキーで切替）
   ========================================================================= */

/* Ponté Night（標準）：温かい黒 × シャンパンゴールド × アイボリー */
html[data-preset="night"] { }

/* Noir：より黒く、ゴールドを明るく（夜の店内の雰囲気を強めたいとき） */
html[data-preset="noir"] {
  --c-ink:   #050505;
  --c-ink-2: #0B0B0B;
  --c-ink-3: #151515;
  --c-brand:        #111111;
  --c-brand-deep:   #000000;
  --c-brand-light:  #232323;
  --c-brand-bright: #D9B97A;
  --c-paper: #F5F3EF;
  --c-paper-2: #E9E5DD;
}