/* =========================================================
   Scratch UI Design Tokens — 直接照真實 Scratch 網站 CSS
   ========================================================= */

:root {
  /* === 主要尺寸單位 === */
  --sizing-unit: 5px;
  --gutter-tiny: calc(var(--sizing-unit) * 1);     /* 5px */
  --gutter-small: calc(var(--sizing-unit) * 2);    /* 10px */
  --gutter: calc(var(--sizing-unit) * 3);          /* 15px */
  --gutter-big: calc(var(--sizing-unit) * 4);      /* 20px */
  --gutter-large: calc(var(--sizing-unit) * 6);    /* 30px */

  /* === Modular scale === */
  --minor-second: 1.067;
  --minor-third: 1.2;
  --major-third: 1.25;
  --perfect-fourth: 1.333;
  --font-sequence: var(--minor-third);

  /* === 文字尺寸 階層（真實 Scratch 數值）=== */
  --h1: 2.5rem;
  --h2: 2rem;
  --h3: 1.4rem;
  --h4: 1rem;
  --h5: 0.85rem;
  --h8: 13px;
  --font-regular: 500;
  --font-bold: 700;
  --document-line-height: 1.7em;

  /* === 配色 === */
  /* 主色：Scratch Variables 橘（之前版本配色） */
  --primary: hsl(28, 100%, 55%);
  --primary-hover: hsl(28, 100%, 47%);
  --primary-focus: hsl(28, 100%, 43%);
  --primary-contrast: #ffffff;
  --primary-contrast-hover: #ffffff;
  --primary-contrast-focus: #ffffff;

  /* 副色：Looks 紫（用在 secondary 強調、Modal） */
  --secondary: hsl(260, 100%, 70%);
  --secondary-hover: hsl(260, 50%, 55%);
  --secondary-contrast: #ffffff;

  /* 成功色：Operators 綠（保留以前 .pass 用法） */
  --success-strong: hsl(144, 45%, 36%);
  --success-strong-hover: hsl(144, 45%, 26%);

  /* 灰階 */
  --darkgray: hsl(225, 15%, 40%);
  --midgray: hsl(225, 15%, 40%);
  --lightgray: hsl(0, 0%, 70%);
  --lightengray: hsl(0, 0%, 85%);
  --whitegray: hsl(0, 0%, 95%);

  /* 狀態色（直接照 Scratch 網站）*/
  --error: #c40;
  --warning: hsl(38, 100%, 55%);
  --success: hsl(144, 45%, 36%);
  --info: hsl(215, 100%, 65%);

  /* 過渡時間 */
  --transition-duration: 0.25s;

  /* === 真實 Scratch 網站額外 token === */
  /* 文字 */
  --scr-text: hsl(225, 15%, 40%);
  --scr-text-soft: hsla(225, 15%, 40%, .75);

  /* 頁面背景 */
  --scr-page-bg: hsl(0, 0%, 99%);          /* #view 背景 */
  --scr-body-bg: hsl(0, 0%, 95%);          /* footer 之類灰白 */

  /* Card / Callout 系統（藍色 alpha tint） */
  --scr-callout-bg: hsla(215, 100%, 65%, .1);    /* 預設淡藍 */
  --scr-callout-bg-orange: hsla(35, 90%, 55%, .1);
  --scr-callout-bg-green: rgba(126, 225, 195, .35);
  --scr-callout-bg-purple: hsla(260, 60%, 60%, .1);
  --scr-callout-border: rgba(0, 0, 0, .1);
  --scr-callout-radius: 0.5rem;

  /* Selection */
  --scr-selection-bg: hsla(215, 100%, 65%, .25);

  /* Input */
  --scr-input-bg: hsl(0, 0%, 98%);
  --scr-input-radius: 5px;

  /* 線色 */
  --scr-line: rgba(0, 0, 0, .1);
  --scr-line-strong: hsl(0, 0%, 85%);

  /* Banner 顏色 */
  --scr-banner-blue: hsl(215, 100%, 65%);
  --scr-banner-green: hsl(144, 45%, 36%);
  --scr-banner-yellow: hsl(38, 100%, 55%);

  /* Code panel */
  --scr-code-bg: hsl(225, 15%, 18%);
  --scr-code-text: hsl(0, 0%, 95%);

  /* ----- 額外保留：Scratch 9 大類別積木色（給 palette 用） ----- */
  --scr-motion: hsl(214, 100%, 65%);     /* #4c97ff */
  --scr-motion-dark: hsl(214, 60%, 47%);
  --scr-looks: hsl(260, 100%, 70%);      /* #9966ff */
  --scr-looks-dark: hsl(260, 50%, 55%);
  --scr-events: hsl(45, 100%, 50%);      /* #ffbf00 */
  --scr-events-dark: hsl(45, 100%, 40%);
  --scr-control: hsl(38, 100%, 55%);     /* #ffab19 */
  --scr-control-dark: hsl(38, 80%, 45%);
  --scr-sensing: hsl(196, 60%, 60%);     /* #5cb1d6 */
  --scr-sensing-dark: hsl(196, 60%, 45%);
  --scr-operators: hsl(120, 45%, 56%);   /* #59c059 */
  --scr-operators-dark: hsl(120, 45%, 41%);
  --scr-vars: hsl(28, 100%, 55%);        /* #ff8c1a */
  --scr-vars-dark: hsl(28, 100%, 43%);
  --scr-lists: hsl(20, 100%, 55%);       /* #ff661a */
  --scr-lists-dark: hsl(20, 100%, 45%);
  --scr-myblocks: hsl(351, 100%, 70%);   /* #ff6680 */
  --scr-myblocks-dark: hsl(351, 100%, 60%);
}