/* ============================================================
   Cupoy Design System — Colors & Typography Tokens
   Source: cupoy網站-學習地圖優化.fig (Figma)
   ============================================================ */

/* 離線版：不 @import Google Fonts。字體改走系統 fallback（見下方 --font-*）。
   若要 pixel-perfect，把 Noto Sans TC / Open Sans 的 woff2 放進 assets/fonts/
   並把下面的 @font-face 取消註解即可。

@font-face { font-family: 'Noto Sans TC'; font-weight: 400; font-display: swap; src: url('fonts/NotoSansTC-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans TC'; font-weight: 500; font-display: swap; src: url('fonts/NotoSansTC-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans TC'; font-weight: 700; font-display: swap; src: url('fonts/NotoSansTC-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans TC'; font-weight: 900; font-display: swap; src: url('fonts/NotoSansTC-Black.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans';   font-weight: 400 700; font-display: swap; src: url('fonts/OpenSans-Variable.woff2') format('woff2'); }
*/

:root {
  /* ── Brand Colors ── */
  --color-primary:        #EB5052;   /* Main brand red — logo, badges, section headers */
  --color-primary-dark:   #E62527;   /* Hover / darker red */
  --color-primary-light:  #E54F52;   /* Slightly lighter red for fills */

  --color-action:         #1976D2;   /* CTA button blue — 建立學習地圖 */
  --color-action-dark:    #1565C0;   /* Darker blue — category header band */

  /* ── Background ── */
  --color-bg:             #F0EFEE;   /* Page / sidebar background (warm light gray) */
  --color-surface:        #FFFFFF;   /* Card / panel background */
  --color-surface-hover:  #F5F5F5;   /* Hover state on surfaces */

  /* ── Category Colors (card header bands) ── */
  --color-cat-ai:         #EB5052;   /* AI / Frontend — red */
  --color-cat-teal:       #00838F;   /* Web / Backend — teal */
  --color-cat-orange:     #EF6C00;   /* Security / DevOps — orange */
  --color-cat-blue:       #1565C0;   /* Data Science — blue */
  --color-cat-green:      #64C69C;   /* "Coming soon" status badge */

  /* ── Semantic ── */
  --color-error:          #E62527;
  --color-success:        #64C69C;
  --color-warning:        #EF6C00;
  --color-info:           #1976D2;

  /* ── Neutrals ── */
  --color-text-primary:   #424242;   /* Main body text */
  --color-text-secondary: #616161;   /* Secondary text, usernames */
  --color-text-muted:     #757575;   /* Placeholder, muted */
  --color-text-subtle:    #9E9E9E;   /* Disabled, soft icons */
  --color-text-inverse:   #FFFFFF;   /* Text on dark/colored backgrounds */

  --color-border:         #E0E0E0;   /* Card borders, dividers */
  --color-border-input:   #BDBDBD;   /* Input field borders */
  --color-border-light:   #EEEEEE;   /* Light borders */
  --color-border-page:    #E5E5E5;   /* Footer / section borders */

  --color-neutral-100:    #F5F5F5;
  --color-neutral-200:    #EEEEEE;
  --color-neutral-300:    #E0E0E0;
  --color-neutral-400:    #BDBDBD;
  --color-neutral-500:    #9E9E9E;
  --color-neutral-600:    #757575;
  --color-neutral-700:    #616161;
  --color-neutral-800:    #424242;
  --color-neutral-900:    #212121;

  /* ── Typography: Font Families ── */
  --font-cjk:       'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', 'Hiragino Sans TC', 'Heiti TC', 'Noto Sans CJK TC', sans-serif;
  --font-body:      'Open Sans', 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', 'Hiragino Sans TC', 'Heiti TC', 'Noto Sans CJK TC', sans-serif;
  --font-data:      'Noto Sans', 'Open Sans', 'Segoe UI', 'Helvetica Neue', Arial, 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', 'Hiragino Sans TC', 'Heiti TC', 'Noto Sans CJK TC', sans-serif;

  /* ── Typography: Sizes ── */
  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  14px;
  --text-md:    16px;
  --text-lg:    18px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   32px;
  --text-4xl:   48px;
  --text-hero:  96px;

  /* ── Typography: Weights ── */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     900;

  /* ── Typography: Line Heights ── */
  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  /* ── Spacing ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* ── Border Radius ── */
  --radius-xs:   2px;   /* Tags, status badges */
  --radius-sm:   4px;   /* Inputs, buttons */
  --radius-md:   8px;   /* Cards, thumbnails */
  --radius-lg:   10px;  /* Larger panels */
  --radius-full: 9999px; /* Pill / circle */

  /* ── Shadows ── */
  --shadow-card:   0px 4px 4px rgba(0, 0, 0, 0.25);
  --shadow-subtle: 0px 2px 4px rgba(16, 24, 40, 0.08), 0px 1px 2px rgba(16, 24, 40, 0.03);
  --shadow-none:   none;

  /* ── Layout ── */
  --layout-width:    1440px;
  --sidebar-width:   272px;
  --content-max:     1144px;
  --navbar-height:   60px;
}

/* ── Semantic Typography Roles ── */

h1, .h1 {
  font-family: var(--font-cjk);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: 36px;
  color: var(--color-text-primary);
}

h2, .h2 {
  font-family: var(--font-cjk);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 30px;
  color: var(--color-text-primary);
}

h3, .h3 {
  font-family: var(--font-data);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: 27px;
  color: var(--color-text-primary);
}

p, .body {
  font-family: var(--font-cjk);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: 21px;
  color: var(--color-text-primary);
}

.label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 20px;
  color: var(--color-text-secondary);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  color: var(--color-text-muted);
}

.nav-link {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: 20px;
  color: var(--color-text-primary);
  letter-spacing: 0.05em;
}

.btn-label {
  font-family: var(--font-cjk);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 21px;
  color: var(--color-text-inverse);
}