/* =========================================================
   あす共通デザイン｜色の決まり（asu-tokens.css）
   v001 / 2026-10-01 / 見本（いろあすさんの採用前）
   使い方：<html data-site="cup|school|club"> を付けて読み込む。
   出典は README.md「色の出典」。値を変えたら tools/check-contrast.mjs を実行する。
   ========================================================= */

:root {
  /* ---- 基本の3色（3サイト共通の土台） ---- */
  --asu-purple: #8246e2;        /* UNITE公式サイトのカード枠 */
  --asu-purple-deep: #5b2bb5;
  --asu-purple-soft: #f1eaff;
  --asu-orange: #f97824;        /* UNITE公式サイトのオレンジ */
  --asu-orange-deep: #a8460a;   /* 白地の文字に使える濃さ */
  --asu-orange-soft: #fff0e3;
  --asu-pink: #d9003a;          /* どっとあすくんの目・口 */
  --asu-pink-deep: #a3002b;
  --asu-pink-soft: #ffe8ee;

  /* AEOS NOVAサムネイルの光（あすカップの演出用） */
  --asu-neon-purple: #9b5cff;
  --asu-neon-orange: #ff8a2a;
  --asu-silver-hi: #f4f6fa;
  --asu-silver: #c3cad6;
  --asu-silver-lo: #7d8696;

  /* ---- 5タイプの色（UNITE公式サイトのタイプ背景画像から） ----
     base＝代表色／deep＝濃い側／light＝明るい側／soft＝薄い下地／ink＝薄い下地に乗せる文字／on＝base に乗せる文字 */
  --type-attack: #dc4c2c;  --type-attack-deep: #ac2c1c;  --type-attack-light: #ec6440;
  --type-attack-soft: #fdebe6;  --type-attack-ink: #8f2414;  --type-attack-on: #ffffff;

  --type-defense: #3c9c1c; --type-defense-deep: #24840c; --type-defense-light: #74cc34;
  --type-defense-soft: #e9f7e1; --type-defense-ink: #1d5e0a; --type-defense-on: #0f2606;

  --type-speed: #1c7ccc;   --type-speed-deep: #0c4cac;   --type-speed-light: #2494dc;
  --type-speed-soft: #e4f1fc;   --type-speed-ink: #0b4a96;   --type-speed-on: #ffffff;

  --type-balance: #a43cb4; --type-balance-deep: #7c248c; --type-balance-light: #c060d0;
  --type-balance-soft: #f6e8f8; --type-balance-ink: #6c1f7b; --type-balance-on: #ffffff;

  --type-support: #fca42c; --type-support-deep: #f46c14; --type-support-light: #ffc85a;
  --type-support-soft: #fff4dc; --type-support-ink: #7a4300; --type-support-on: #3a2000;

  /* ---- 状態の色 ---- */
  --asu-success: #17703f;  --asu-success-soft: #e3f5ea;
  --asu-warning: #8a5300;  --asu-warning-soft: #fff4d6;
  --asu-danger: #c0262d;   --asu-danger-deep: #96161c; --asu-danger-soft: #fdeaea;
  --asu-danger-btn: #c0262d; --asu-on-danger: #ffffff;
  --asu-info: var(--asu-purple-deep); --asu-info-soft: var(--asu-purple-soft);

  /* ---- グラデーション ---- */
  /* あすグラデーション：紫 → どっとあすくんのピンク → オレンジ。3サイトをつなぐ印 */
  --asu-grad-brand: linear-gradient(100deg, var(--asu-purple) 0%, var(--asu-pink) 52%, var(--asu-orange) 100%);
  /* ボタン用（白い文字が読める濃さに寄せた版） */
  --asu-btn-stop-1: #6f36d6;
  --asu-btn-stop-2: #c8003a;
  --asu-btn-stop-3: #c9520c;
  --asu-grad-button: linear-gradient(100deg, var(--asu-btn-stop-1) 0%, var(--asu-btn-stop-2) 55%, var(--asu-btn-stop-3) 100%);
  --asu-grad-metal: linear-gradient(180deg, var(--asu-silver-hi) 0%, var(--asu-silver) 48%, var(--asu-silver-lo) 52%, #e3e7ee 100%);
  --asu-grad-arena:
    radial-gradient(120% 70% at 0% 0%, rgb(155 92 255 / 34%) 0%, transparent 60%),
    radial-gradient(120% 70% at 100% 100%, rgb(255 138 42 / 30%) 0%, transparent 60%),
    linear-gradient(180deg, #0d0b18 0%, #120f20 100%);
  --type-grad-attack:  linear-gradient(135deg, var(--type-attack-light), var(--type-attack-deep));
  --type-grad-defense: linear-gradient(135deg, var(--type-defense-light), var(--type-defense-deep));
  --type-grad-speed:   linear-gradient(135deg, var(--type-speed-light), var(--type-speed-deep));
  --type-grad-balance: linear-gradient(135deg, var(--type-balance-light), var(--type-balance-deep));
  --type-grad-support: linear-gradient(135deg, var(--type-support-light), var(--type-support-deep));

  /* ---- 形・文字・動き ---- */
  --asu-font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --asu-font-num: "SF Pro Rounded", "Hiragino Sans", system-ui, sans-serif;
  --asu-fs-base: 16px;
  --asu-radius-s: 8px;
  --asu-radius: 14px;
  --asu-radius-l: 20px;
  --asu-radius-pill: 999px;
  --asu-tap: 48px;              /* 押せる大きさの最小 */
  --asu-tap-s: 36px;
  --asu-gap: 12px;
  --asu-ease: cubic-bezier(.2, .8, .2, 1);
  --asu-ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --asu-dur: 160ms;

  /* ---- 画面の色（既定＝あすクラブ） ---- */
  --asu-bg: #f5f5fb;
  --asu-bg-art: radial-gradient(90% 40% at 100% 0%, rgb(130 70 226 / 10%), transparent 70%), #f5f5fb;
  --asu-surface: #ffffff;
  --asu-surface-2: #f0eff8;
  --asu-text: #1b1830;
  --asu-muted: #5d5a73;
  --asu-line: #dedbea;
  --asu-accent: var(--asu-purple);
  --asu-accent-ink: var(--asu-purple-deep);
  --asu-accent-soft: var(--asu-purple-soft);
  --asu-on-primary: #ffffff;
  --asu-focus: #2f6fe4;
  --asu-shadow: 0 1px 2px rgb(27 24 48 / 6%), 0 8px 24px rgb(27 24 48 / 8%);
  --asu-shadow-press: 0 1px 2px rgb(27 24 48 / 10%);
  color-scheme: light;
}

/* あすクラブ：界隈全体・大人も。落ち着いた紫を主役に */
[data-site="club"] {
  --asu-accent: var(--asu-purple);
  --asu-accent-ink: var(--asu-purple-deep);
  --asu-accent-soft: var(--asu-purple-soft);
}

/* あすスクール：小中学生。明るく、文字を少し大きく、角を丸く。差し色はオレンジ */
[data-site="school"] {
  --asu-fs-base: 17px;
  --asu-radius: 18px;
  --asu-radius-l: 24px;
  --asu-bg: #fff8f1;
  --asu-bg-art: radial-gradient(90% 40% at 0% 0%, rgb(249 120 36 / 14%), transparent 70%), radial-gradient(70% 30% at 100% 10%, rgb(217 0 58 / 7%), transparent 70%), #fff8f1;
  --asu-surface-2: #fff1e4;
  --asu-text: #24192a;
  --asu-muted: #5f5160;
  --asu-line: #f0dccb;
  --asu-accent: var(--asu-orange);
  --asu-accent-ink: var(--asu-orange-deep);
  --asu-accent-soft: var(--asu-orange-soft);
}

/* あすカップ：大会。AEOS NOVAの暗い会場・紫と橙の光・銀の金属 */
[data-site="cup"] {
  --asu-bg: #0d0b18;
  --asu-bg-art: var(--asu-grad-arena);
  --asu-surface: #1a1730;
  --asu-surface-2: #241f40;
  --asu-text: #f4f2fb;
  --asu-muted: #b3add0;
  --asu-line: #3a3360;
  --asu-accent: var(--asu-neon-purple);
  --asu-accent-ink: #c9a8ff;
  --asu-accent-soft: rgb(155 92 255 / 16%);
  --asu-focus: #ffb36b;
  --asu-shadow: 0 0 0 1px rgb(255 255 255 / 4%), 0 10px 30px rgb(0 0 0 / 45%);
  --asu-shadow-press: 0 0 0 1px rgb(255 255 255 / 6%);
  --asu-success: #5fd394;  --asu-success-soft: rgb(95 211 148 / 14%);
  --asu-warning: #ffc266;  --asu-warning-soft: rgb(255 194 102 / 14%);
  --asu-danger: #ff6b70;   --asu-danger-soft: rgb(255 107 112 / 14%);
  --asu-info: #c9a8ff;     --asu-info-soft: rgb(155 92 255 / 16%);
  --asu-danger-btn: #c92a33;
  /* 暗い画面では、タイプの薄い下地を暗く、文字を明るくする */
  --type-attack-soft: rgb(220 76 44 / 20%);   --type-attack-ink: #ff9a80;
  --type-defense-soft: rgb(60 156 28 / 22%);  --type-defense-ink: #9fe07a;
  --type-speed-soft: rgb(28 124 204 / 24%);   --type-speed-ink: #8cc8ff;
  --type-balance-soft: rgb(164 60 180 / 24%); --type-balance-ink: #eba2f7;
  --type-support-soft: rgb(252 164 44 / 18%); --type-support-ink: #ffcf80;
  color-scheme: dark;
}