/* --------------------------------------------------
  containerサイズ保持変数
  Memo: @property が使える環境であればコンテナのさらに親要素の幅を参照できるので、containerを1段階飛び出せる。
        cqi を算出値で保持するために登録済みカスタムプロパティとして定義
-------------------------------------------------- */
@property --sz--container {
  syntax: '<length-percentage>';
  initial-value: 100cqi;
  inherits: true;
}

:root {
  /** 
   * Content size
   */
  --sz--xl: 1600px; // 80*20
  --sz--l: 1280px; // 80*16
  --sz--m: 56rem; // 読みやすいのが50文字程度。
  --sz--s: 42rem;
  --sz--xs: 32rem;

  /** 
   * カラーパレット
   *   1. 赤を基準として 明度L・彩度C を決める。
   *   2. 各色は 色相H を固定セット。 L,C は色によって微調整。
   */
  --black: #000;
  --white: #fff;

  // 基準の明度と彩度（red)
  --L: 60%;
  --C: 0.22;

  // パレットトークン
  --red: oklch(var(--L) var(--C) 20);
  --orange: oklch(calc(var(--L) + 4%) calc(var(--C) - 0.01) 52);
  --yellow: oklch(calc(var(--L) + 12%) calc(var(--C) - 0.025) 84);
  --green: oklch(calc(var(--L) + 4%) calc(var(--C) - 0.02) 152);
  --blue: oklch(calc(var(--L) - 2%) calc(var(--C) + 0.01) 260);
  --purple: oklch(calc(var(--L) - 4%) calc(var(--C) + 0.02) 292);
  --pink: oklch(calc(var(--L) + 2%) calc(var(--C) + 0.02) 348);
  --gray: oklch(calc(var(--L) - 4%) 0.04 256);

  /** 
   * セマンティックカラー
   */
  --brand: #1e5f8c;
  --accent: #d94a6a;

  // base (background)
  --base: hsl(224 4% 99%);
  --base-2: hsl(224 8% 95%);

  // text (contents)
  --text: hsl(224 4% 8%);
  --text-2: hsl(224 6% 32%);

  // link
  --link: oklch(50% 0.3 240); //hsl(224, 90%, 48%);

  // divider (border)
  --divider: hsl(224 8% 88%);

  /** 
   * opacity
   */
  --o---10: 0.75;
  --o---20: 0.5;
  --o---30: 0.25;

  /** 
   * border-radius
   */
  --bdrs--10: 0.25rem; // ≒ 4px
  --bdrs--20: 0.5rem; // ≒ 8px
  --bdrs--30: 1rem; // ≒ 16px
  --bdrs--40: 1.5rem; // ≒ 24px
  --bdrs--99: 99rem;

  /** 
   * shadow color, shadow inset, shadow size
   */
  --shc: hsl(220 4% 8% / 5%);

  --shsz--5: 0px 1px 3px;
  --shsz--10: 0px 2px 6px;
  --shsz--20: 0px 4px 12px;
  --shsz--30: 0px 8px 24px;
  --shsz--40: 0px 16px 48px;

  /** 
   * aspect-ratio
   */
  --ar--og: 1.91/1;

  /** 
   * サイトコンテンツの左右につける余白量
   *   Memo: -max-sz\:full などからも参照されるのでrootで定義している
   */
  --gutter-size: var(--s30);
}