/*
  Design Tokens
  Source: Expert Color System + Mainpage reference
  ─────────────────────────────────────────────────
*/

:root {

  /* ── Brand ──────────────────────────────────── */
  --color-brand-blue:        #0A78D1;
  --color-brand-blue-dark:   #0B3D91;
  --color-brand-orange:      #F36F12;

  /* ── Market (Taiwan: red = up, green = down) ── */
  --color-up:                #E8503A;
  --color-up-bg:             rgba(232, 80, 58, 0.10);
  --color-down:              #20C060;
  --color-down-bg:           rgba(32, 192, 96, 0.10);
  --color-flat:              #999999;
  --color-flat-bg:           rgba(153, 153, 153, 0.10);

  /* ── Text ───────────────────────────────────── */
  --color-text-primary:      #1A1A2E;
  --color-text-secondary:    #555555;
  --color-text-tertiary:     #999999;
  --color-text-inverse:      #FFFFFF;
  --color-text-inverse-dim:  rgba(255, 255, 255, 0.65);

  /* ── Surface ────────────────────────────────── */
  --color-surface:           #FFFFFF;
  --color-surface-frosted:   rgba(255, 255, 255, 0.80);
  --color-bg:                #F7F9FF;
  --color-border:            #E8E8EB;
  --color-border-light:      rgba(255, 255, 255, 0.22);

  /* ── 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;

  /* ── Typography ──────────────────────────────── */
  --font-family: -apple-system, BlinkMacSystemFont,
                 'PingFang TC', 'Noto Sans TC', sans-serif;

  --font-size-xs:   10px;
  --font-size-sm:   12px;
  --font-size-base: 14px;
  --font-size-md:   15px;
  --font-size-lg:   17px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;
  --font-size-3xl:  28px;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --font-weight-black:   800;

  /* ── Radius ──────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-full: 9999px;

  /* ── Shadow ──────────────────────────────────── */
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-top: 0 -2px 10px rgba(0,0,0,0.07);

  /* ── Breakpoints (reference — use in @media) ─── */
  /* sm: 480px  |  md: 768px  |  lg: 1024px  |  xl: 1280px */

  /* ── Content container ───────────────────────── */
  /* Fluid padding: 16px mobile → 48px large desktop */
  --container-px: clamp(16px, 4vw, 48px);
  /* Max readable width for main content */
  --container-max: 960px;

  /* ── Component heights ───────────────────────── */
  --top-nav-height:     56px;
  --bottom-nav-height:  60px;
}