@charset "UTF-8";
/* ==========================================================================
   omiso-tokens.css — Le Petit Bar / 色の唯一の出どころ
   --------------------------------------------------------------------------
   このファイルが、テーマ全体の色を決めます。
   ほかのCSSファイルは、ここで決めた変数を参照するだけにしてください。

   ▼ ルール（これだけ守れば色は増えません）
     新しいコンテンツを作るとき、CSSに「#」から始まる文字を書かない。
     書きたくなったら、それはここに足すべき色か、
     すでにある5色のどれかで代用できる色かのどちらかです。
     どちらでもないなら、たいていその色は要りません。

   ▼ 読み込み
     functions.php で、ほかのどのCSSよりも先に読み込みます。
     （CSS変数は宣言の位置に関係なく解決されるので、
       順番が前後しても壊れませんが、先に読むほうが分かりやすいです）
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     素材 ── 紙とインク
     ------------------------------------------------------------------ */
  --omiso-paper:      #F4EDE8;   /* 紙。ほんのり赤みのある白 */
  --omiso-paper-2:    #FBF7F4;   /* カード・新聞の面 */
  --omiso-ink:        #241E1C;   /* 文字 */
  --omiso-ink-soft:   #5A4E49;   /* 弱い文字（キャプション・日付・補足）
                                    ステップ4で #6B5F5A と #5A4E49 の2種類を
                                    この1つに統一しました。濃いほうを選んだのは、
                                    この色が .55rem まで小さくなる場所で使われていて、
                                    紙の上のコントラストが 5.3:1 では薄かったためです。
                                    （#5A4E49 なら 6.9:1）
                                    もっと弱くしたいときは、この1行を #6B5F5A に
                                    戻せば元どおりになります。 */

  /* 罫線などで濃度を変えて使うための rgb 成分
     使い方: rgba(var(--omiso-ink-rgb), .14) */
  --omiso-ink-rgb:    36, 30, 28;
  --omiso-paper-rgb:  244, 237, 232;
  --omiso-laiton-rgb: 176, 141, 79;
  --omiso-rose-rgb:   227, 183, 182;
  --omiso-vert-rgb:   31, 61, 51;


  /* ------------------------------------------------------------------
     5色 ── これ以外の色を使わないこと
     ------------------------------------------------------------------
     sang と marine は対の関係です。
     どちらも「そのページの主役の色」で、紙の上での重さ（コントラスト）を
     8.1 : 8.2 とほぼ同じに揃えてあります。
     同じ書体を、2種類のインクで刷り分けているイメージです。

         推しコス   OMISO beauty … sang   （オックスブラッド）
         ヘアケア   OMISO hair   … marine（濃紺）

     vert は、その2ページに共通する「構造」の色です。
     ------------------------------------------------------------------ */
  --omiso-vert:   #1F3D33;   /* 深緑。構造：帯・見出し・選択中 */
  --omiso-sang:   #7B2B3A;   /* オックスブラッド。推しコスの主役 */
  --omiso-marine: #2B466E;   /* 濃紺。ヘアケアの主役 */
  --omiso-laiton: #B08D4F;   /* 真鍮。線と小さな文字だけ。広い面には使わない */
  --omiso-rose:   #E3B7B6;   /* ローズ・プードレ。淡い面 */


  /* ------------------------------------------------------------------
     派生 ── 上の5色から作った、役割のある色
     ------------------------------------------------------------------ */

  /* 深緑：夜の店内 */
  --omiso-vert-deep:   #17302A;   /* 一段沈めた面 */
  --omiso-vert-dark:   #162C25;   /* テレビの筐体の陰・棚の奥 */
  --omiso-vert-100:    #DDE6E1;   /* 深緑の淡い面（いまは未使用。sang-100 / marine-100 と対になる枠） */

  /* 黒板（L'ARDOISE）の3色は削除しました。
     常連制度を「LA FICHE（客帳）」＝紙のカードに作り替えたので、
     サイトから灰緑の面が無くなりました。 */

  /* 真鍮 */
  --omiso-laiton-lite: #C6A164;   /* 真鍮プレートの上端・ハイライト */
  --omiso-laiton-dark: #8A6E3C;   /* 陰・押されたとき */
  --omiso-laiton-ink:  #23180C;   /* 真鍮の上に乗せる文字 */
  --omiso-laiton-100:  #EDE3D3;   /* 真鍮側の淡い面 */

  /* ステップ4で、プレートごとに4つ（#8A6E3C / #9A7A42 / #A2803F / #A8834A）に
     枝分かれしていた「真鍮の陰」を --omiso-laiton-dark に統一しました。
     いちばん濃いものに寄せたので、真鍮のグラデーションが少しだけ深くなります。 */

  /* オックスブラッド */
  --omiso-sang-100:    #EFDEDF;   /* 写真の下に敷く淡い面 */

  /* 濃紺 */
  --omiso-marine-100:  #DDE4EE;   /* 写真の下に敷く淡い面 */
  --omiso-marine-rgb:  43, 70, 110;

  /* 夜 ── 消えている画面・回っていない盤 */
  --omiso-night:        #0E0E0E;  /* レコード盤の黒 */
  --omiso-night-2:      #0A0C0B;  /* ブラウン管の消えた画面 */
  --omiso-vert-shadow:  #17201C;  /* テレビまわりの陰 */


  /* ------------------------------------------------------------------
     かたち ── 封蝋（ワックスシール）
     ------------------------------------------------------------------
     色ではありませんが、客帳（LA FICHE）とトップページの2箇所で
     同じ形を使うので、ここを唯一の出どころにします。
     極座標 r = R(1 + 0.058·cos6θ) を閉じた曲線にしたもので、
     6つのふくらみが「押したときに外へはみ出した蝋」になります。
     使い方: mask-image: var(--omiso-wax-shape);
     ------------------------------------------------------------------ */
  --omiso-wax-shape: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath d=%22M99.5 50.0C99.2 52.8 97.8 55.7 96.6 58.2C95.4 60.8 93.5 63.0 92.1 65.3C90.8 67.7 89.6 69.8 88.5 72.2C87.5 74.7 86.9 77.4 85.7 80.0C84.6 82.6 83.4 85.5 81.6 87.7C79.8 89.8 77.3 91.7 74.8 92.9C72.2 94.0 69.0 94.3 66.2 94.5C63.4 94.7 60.5 94.1 57.8 94.1C55.1 94.1 52.6 94.2 50.0 94.5C47.4 94.8 44.7 95.7 41.9 96.0C39.1 96.2 36.0 96.7 33.2 96.2C30.4 95.7 27.5 94.5 25.2 92.9C23.0 91.2 21.2 88.6 19.6 86.3C18.0 83.9 17.0 81.1 15.7 78.8C14.3 76.5 13.1 74.4 11.5 72.2C9.9 70.1 7.8 68.2 6.2 66.0C4.5 63.7 2.5 61.2 1.6 58.5C0.6 55.9 0.2 52.8 0.5 50.0C0.8 47.2 2.2 44.3 3.4 41.8C4.6 39.2 6.5 37.0 7.9 34.7C9.2 32.3 10.4 30.2 11.5 27.8C12.5 25.3 13.1 22.6 14.3 20.0C15.4 17.4 16.6 14.5 18.4 12.3C20.2 10.2 22.7 8.3 25.2 7.1C27.8 6.0 31.0 5.7 33.8 5.5C36.6 5.3 39.5 5.9 42.2 5.9C44.9 5.9 47.4 5.8 50.0 5.5C52.6 5.2 55.3 4.3 58.1 4.0C60.9 3.8 64.0 3.3 66.8 3.8C69.6 4.3 72.5 5.5 74.8 7.1C77.0 8.8 78.8 11.4 80.4 13.7C82.0 16.1 83.0 18.9 84.3 21.2C85.7 23.5 86.9 25.6 88.5 27.8C90.1 29.9 92.2 31.8 93.8 34.0C95.5 36.3 97.5 38.8 98.4 41.5C99.4 44.1 99.8 47.2 99.5 50.0Z%22 fill=%22%23000%22/%3E%3C/svg%3E");


  /* ------------------------------------------------------------------
     書体 ── 4役
     ------------------------------------------------------------------ */
  --omiso-f-enseigne: "OmisoEmoji", "Linotype Didot", Didot, "Didot LT Pro",
                      "Bodoni Moda", "Playfair Display", serif;
  --omiso-f-label:    "OmisoEmoji", "Cormorant Garamond", "Cormorant", serif;
  --omiso-f-mincho:   "OmisoEmoji", "Zen Old Mincho", "Yu Mincho",
                      "Hiragino Mincho ProN", serif;
  --omiso-f-sans:     "OmisoEmoji", "Zen Kaku Gothic New", -apple-system,
                      "Hiragino Sans", sans-serif;
}