/* =========================================================================
   admage v5 — design tokens
   色・文字・余白・角丸・影・動きをここで定義し、部品（components.css）は
   変数だけを参照する。ライト／ダークは :root[data-theme] で差し替える。
   既定はライト。data-theme="dark" でダーク、"system" で OS の設定に従う。
   ========================================================================= */

:root {
  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Inter", "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* ---- Spacing (4px grid) ---------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ---- Radius ---------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* ---- Layout ---------------------------------------------------------- */
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 60px;
  --topbar-h: 52px;
  --row-h: 44px;          /* 一覧の行の高さ（コンパクト表示で上書き） */
  --row-h-compact: 34px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* ---- Accent：ディマージシェアのコーポレートカラー（dimage.co.jp の --color-main / --color-blue / グラデーション）
     ロール別の色は下の [data-role] で差し替える */
  --brand-navy: #1c398e;
  --brand-blue: #2d50c6;
  --brand-gradient: linear-gradient(135deg, #000064 0%, #2d50c6 55%, #2891ff 100%);
  --accent: var(--brand-navy);
  --accent-strong: #142a6b;
  --accent-weak: #e9eef9;
  --accent-ring: rgb(45 80 198 / 0.28);
  --accent-glow: rgb(40 145 255 / 0.55);

  /* ---- Light theme (default) ------------------------------------------- */
  color-scheme: light;
  --bg: #fbfbfc;
  --bg-subtle: #f4f4f6;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-hover: #f5f5f7;
  --surface-selected: #eef2fb;

  --border: #e7e7ec;
  --border-strong: #d6d6de;

  --text: #0d0d12;
  --text-secondary: #5c5c6b;
  --text-tertiary: #8e8e9c;
  --text-on-accent: #ffffff;

  --success: #12a150;
  --success-weak: #e7f7ee;
  --warning: #c27a00;
  --warning-weak: #fdf4e3;
  --danger: #e5484d;
  --danger-weak: #fdecec;
  --info: #0b84c6;
  --info-weak: #e6f4fb;
  --neutral-weak: #f0f0f3;

  --shadow-xs: 0 1px 2px rgb(16 16 24 / 0.05);
  --shadow-sm: 0 1px 2px rgb(16 16 24 / 0.04), 0 2px 6px rgb(16 16 24 / 0.04);
  --shadow-lg: 0 12px 32px -8px rgb(16 16 24 / 0.18), 0 2px 6px rgb(16 16 24 / 0.06);
  --overlay: rgb(250 250 252 / 0.7);

  --grid-dot: rgb(16 16 24 / 0.06);

  /* ---- Chart（validate_palette.js で検証済み。系列の色は固定の順で使う） */
  --chart-1: #2d50c6;   /* 今期間・主系列（ブランドの青） */
  --chart-2: #0f9d84;   /* 前期間・比較系列（青緑） */
  --chart-grid: #ececf0;
  --chart-axis: #8e8e9c;
}

/* ---- Dark theme -------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #09090b;
  --bg-subtle: #0f0f12;
  --surface: #111114;
  --surface-raised: #17171b;
  --surface-hover: #1b1b20;
  --surface-selected: #141c33;

  --border: #232329;
  --border-strong: #303038;

  --text: #ededf0;
  --text-secondary: #a1a1ad;
  --text-tertiary: #6b6b78;

  --accent: #6f8fec;          /* 紺は暗い背景で見えにくいので、同系の明るい青に */
  --accent-strong: #8aa5f0;
  --accent-weak: rgb(45 80 198 / 0.22);
  --accent-ring: rgb(111 143 236 / 0.35);

  --success: #3dd68c;
  --success-weak: rgb(61 214 140 / 0.12);
  --warning: #f5b544;
  --warning-weak: rgb(245 181 68 / 0.12);
  --danger: #ff6369;
  --danger-weak: rgb(255 99 105 / 0.12);
  --info: #4cc2ff;
  --info-weak: rgb(76 194 255 / 0.12);
  --neutral-weak: #1e1e24;

  --shadow-xs: 0 1px 0 rgb(255 255 255 / 0.03) inset;
  --shadow-sm: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 0 0 1px rgb(255 255 255 / 0.06), 0 16px 40px -8px rgb(0 0 0 / 0.7);
  --overlay: rgb(9 9 11 / 0.65);

  --grid-dot: rgb(255 255 255 / 0.05);

  --chart-1: #5b7fe8;
  --chart-2: #18a88a;
  --chart-grid: #1f1f25;
  --chart-axis: #6b6b78;
}

/* OS の設定に従う */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --bg: #09090b;
    --bg-subtle: #0f0f12;
    --surface: #111114;
    --surface-raised: #17171b;
    --surface-hover: #1b1b20;
    --surface-selected: #141c33;
    --border: #232329;
    --border-strong: #303038;
    --text: #ededf0;
    --text-secondary: #a1a1ad;
    --text-tertiary: #6b6b78;
    --accent: #6f8fec;          /* 紺は暗い背景で見えにくいので、同系の明るい青に */
  --accent-strong: #8aa5f0;
  --accent-weak: rgb(45 80 198 / 0.22);
  --accent-ring: rgb(111 143 236 / 0.35);
    --success: #3dd68c;
    --success-weak: rgb(61 214 140 / 0.12);
    --warning: #f5b544;
    --warning-weak: rgb(245 181 68 / 0.12);
    --danger: #ff6369;
    --danger-weak: rgb(255 99 105 / 0.12);
    --info: #4cc2ff;
    --info-weak: rgb(76 194 255 / 0.12);
    --neutral-weak: #1e1e24;
    --shadow-xs: 0 1px 0 rgb(255 255 255 / 0.03) inset;
    --shadow-sm: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 1px 2px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 0 0 1px rgb(255 255 255 / 0.06), 0 16px 40px -8px rgb(0 0 0 / 0.7);
    --overlay: rgb(9 9 11 / 0.65);
    --grid-dot: rgb(255 255 255 / 0.05);
    --chart-1: #5b7fe8;
    --chart-2: #18a88a;
    --chart-grid: #1f1f25;
    --chart-axis: #6b6b78;
  }
}

/* ---- Role accents ------------------------------------------------------ */
:root[data-role="advertiser"]  { --accent: #b45309; --accent-strong: #92400e; --accent-weak: #fdf2e3; --accent-ring: rgb(180 83 9 / 0.28); }
:root[data-role="media_owner"] { --accent: #0f766e; --accent-strong: #115e59; --accent-weak: #e3f5f2; --accent-ring: rgb(15 118 110 / 0.28); }

/* ---- Density ----------------------------------------------------------- */
:root[data-density="compact"] { --row-h: var(--row-h-compact); }

/* ---------- 広告主用・メディアオーナー用の画面（ポータル）の色 ----------
   管理画面（紺）と見分けやすいよう、メインの色だけを変える。代理ログイン中の管理者が、管理画面でないとすぐわかるように */
html[data-portal="advertiser"] {
  --accent: #0f7a5c;
  --accent-strong: #0a5a44;
  --accent-weak: #e3f4ee;
  --accent-ring: rgb(15 122 92 / 0.28);
  --accent-glow: rgb(24 168 128 / 0.5);
  --chart-1: #0f7a5c;
}
html[data-portal="advertiser"][data-theme="dark"] {
  --accent: #34b98f;
  --accent-strong: #5fd0aa;
  --accent-weak: #10302a;
  --chart-1: #34b98f;
}
html[data-portal="media_owner"] {
  --accent: #b5550d;
  --accent-strong: #8a3f08;
  --accent-weak: #fbeee2;
  --accent-ring: rgb(181 85 13 / 0.28);
  --accent-glow: rgb(230 120 40 / 0.5);
  --chart-1: #b5550d;
}
html[data-portal="media_owner"][data-theme="dark"] {
  --accent: #e8893f;
  --accent-strong: #f2a766;
  --accent-weak: #3a2414;
  --chart-1: #e8893f;
}