/* ============================================================
   Finfo Design System — Colors & Typography Tokens
   Source of truth: finfo-web tailwind.config.js + styles/globals.css
   ============================================================ */

/* ---------- PingFang TC (uploaded brand fonts) ---------- */
@font-face { font-family: 'PingFang TC'; font-weight: 200; font-style: normal; font-display: swap; src: url('fonts/PingFang_ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'PingFang TC'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/PingFang_Light.ttf') format('truetype'); }
@font-face { font-family: 'PingFang TC'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/PingFang_Regular.ttf') format('truetype'); }
@font-face { font-family: 'PingFang TC'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/PingFang_Medium.ttf') format('truetype'); }
@font-face { font-family: 'PingFang TC'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/PingFang_Bold.ttf') format('truetype'); }
@font-face { font-family: 'PingFang TC'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/PingFang_Bold.ttf') format('truetype'); }
@font-face { font-family: 'PingFang TC'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/PingFang_Heavy.ttf') format('truetype'); }
@font-face { font-family: 'PingFang TC'; font-weight: 900; font-style: normal; font-display: swap; src: url('fonts/PingFang_Heavy.ttf') format('truetype'); }

:root {
  /* ---------- Brand / Primary (Finfo Orange) ---------- */
  --primary: #ffa73b;
  --primary-40: #ff8e03;
  --primary-50: #ff9a1f;
  --primary-60: #ffa73b;   /* default */
  --primary-70: #ffc072;
  --primary-80: #ffdcb1;
  --primary-85: #ffead0;
  --primary-90: #fff1e0;
  --primary-95: #fff8ef;

  /* ---------- Secondary (Coral Pink) ---------- */
  --secondary: #f88f88;
  --secondary-40: #ff7168;
  --secondary-50: #f8827c;
  --secondary-60: #f88f88;  /* default */
  --secondary-70: #faaea9;
  --secondary-80: #fcd2cf;
  --secondary-85: #fde4e2;
  --secondary-90: #feedec;
  --secondary-95: #fef6f5;

  /* ---------- Neutral (Warm Greys) ---------- */
  --neutral-0: #000000;
  --neutral-10: #282828;
  --neutral-20: #444444;    /* default body text */
  --neutral-40: #787878;
  --neutral-50: #969696;
  --neutral-60: #c3c3c3;
  --neutral-70: #e1e1e1;
  --neutral-80: #e9e9e9;
  --neutral-85: #f0f0f0;
  --neutral-90: #f8f8f8;
  --neutral-95: #fbfbfb;
  --neutral-100: #ffffff;

  /* ---------- Gray alphas (on #444) ---------- */
  --gray-1: rgb(68 68 68 / 0.72);
  --gray-2: rgb(68 68 68 / 0.64);
  --gray-3: rgb(68 68 68 / 0.56);
  --gray-4: rgb(68 68 68 / 0.48);
  --gray-5: rgb(68 68 68 / 0.40);
  --gray-6: rgb(68 68 68 / 0.32);
  --gray-7: rgb(68 68 68 / 0.24);
  --gray-8: rgb(68 68 68 / 0.16);
  --gray-9: rgb(68 68 68 / 0.12);
  --gray-10: rgb(68 68 68 / 0.08);
  --gray-11: rgb(68 68 68 / 0.04);
  --gray-12: rgb(68 68 68 / 0.02);
  --gray-brown: #faf8f5;
  --gray-light: #f5f5f5;

  /* ---------- Accent palette ---------- */
  --blue: #59abeb;
  --blue-50: #95c9f2;
  --blue-70: #d7ebfa;
  --blue-90: #f2f8fd;
  --green: #50c59b;
  --green-50: #8fdabf;
  --green-70: #d5f1e7;
  --green-90: #f1faf7;
  --purple: #b38fec;
  --purple-50: #ceb8f3;
  --purple-70: #ede4fa;
  --purple-90: #f9f6fd;

  /* ---------- Semantic ---------- */
  --bg-dark: #f3f1ee;
  --bg-light: #faf8f5;
  --bg-page: #fefdfc;
  --link: #307ab4;
  --link-dark: #276291;
  --indigo: #307ab4;
  --indigo-dark: #1f5177;
  --error: #fa5b5b;
  --error-dark: #e51a1a;
  --danger: #fa5b5b;

  /* ---------- Foreground semantic (mapped) ---------- */
  --fg-primary: var(--neutral-20);   /* #444 primary text */
  --fg-secondary: var(--gray-1);     /* 72% */
  --fg-tertiary: var(--gray-3);      /* 56%, placeholders */
  --fg-disabled: var(--gray-4);
  --fg-onPrimary: #ffffff;
  --border: var(--gray-9);           /* default border */

  /* ---------- Type: Stack ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Noto Sans TC',
    'Segoe UI', SegoeUI, 'Microsoft JhengHei UI', 'Microsoft JhengHei', '微軟正黑體',
    Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';

  /* ---------- Type: Base sizes (rem, 16px root) ---------- */
  --fs-display-lg: 3rem;        /* 48 / 72, 500 */
  --fs-display-1: 2.25rem;      /* 36 / 54, 500 */
  --fs-display-2: 1.75rem;      /* 28 / 42, 500 */
  --fs-display-3: 1.5rem;       /* 24 / 36, 500 */
  --fs-t1: 1.375rem;            /* 22 / 32 */
  --fs-t2: 1.25rem;             /* 20 / 30 */
  --fs-t3: 1.125rem;            /* 18 / 27 */
  --fs-t4: 1rem;                /* 16 / 24 */
  --fs-t5: 0.875rem;            /* 14 / 21 */
  --fs-t6: 0.75rem;             /* 12 / 18 */
  --fs-t7: 0.6875rem;           /* 11 / 16 */

  --lh-display-lg: 4.5rem;
  --lh-display-1: 3.375rem;
  --lh-display-2: 2.625rem;
  --lh-display-3: 2.25rem;
  --lh-t1: 2rem;
  --lh-t2: 1.875rem;
  --lh-t3: 1.6875rem;
  --lh-t4: 1.5rem;
  --lh-t5: 1.3125rem;
  --lh-t6: 1.125rem;
  --lh-t7: 1rem;

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

  /* ---------- Radii ---------- */
  --radius-sm: 0.25rem;    /* 4px, btn default */
  --radius-md: 0.5rem;     /* 8px, rounded-lg */
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-pill: 9999px;

  /* ---------- Shadows (tailwind boxShadow 1-5) ---------- */
  --shadow-1: 0 0.125rem 0.5rem rgb(68 68 68 / 0.08);
  --shadow-2: 0 0.125rem 0.5rem rgb(68 68 68 / 0.16);
  --shadow-3: 0 0 1rem 0.25rem rgb(68 68 68 / 0.08);
  --shadow-4: 0 0 1rem 0.25rem rgb(68 68 68 / 0.16);
  --shadow-5: 0 0.125rem 1rem 0.375rem rgb(68 68 68 / 0.16);

  /* ---------- Spacing (custom additions) ---------- */
  --sp-4_5: 1.125rem;
  --sp-18: 4.5rem;
  --sp-26: 6.5rem;

  /* ---------- Z-index (from bootstrap legacy) ---------- */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ==============================================
   Semantic element styles
   ============================================== */

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--fg-primary);
  background: var(--neutral-100);
  font-size: var(--fs-t4);
  line-height: var(--lh-t4);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgb(255 167 59 / 0.25);
}

h1, .h1 { font-size: var(--fs-display-1); line-height: var(--lh-display-1); font-weight: var(--fw-medium); margin: 0; }
h2, .h2 { font-size: var(--fs-display-2); line-height: var(--lh-display-2); font-weight: var(--fw-medium); margin: 0; }
h3, .h3 { font-size: var(--fs-display-3); line-height: var(--lh-display-3); font-weight: var(--fw-medium); margin: 0; }
h4, .h4 { font-size: var(--fs-t1); line-height: var(--lh-t1); font-weight: var(--fw-medium); margin: 0; }
h5, .h5 { font-size: var(--fs-t2); line-height: var(--lh-t2); font-weight: var(--fw-medium); margin: 0; }
h6, .h6 { font-size: var(--fs-t3); line-height: var(--lh-t3); font-weight: var(--fw-medium); margin: 0; }
p { margin: 0; }

.display-lg { font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); font-weight: var(--fw-medium); }
.display-1  { font-size: var(--fs-display-1); line-height: var(--lh-display-1); font-weight: var(--fw-medium); }
.display-2  { font-size: var(--fs-display-2); line-height: var(--lh-display-2); font-weight: var(--fw-medium); }
.display-3  { font-size: var(--fs-display-3); line-height: var(--lh-display-3); font-weight: var(--fw-medium); }
.t1 { font-size: var(--fs-t1); line-height: var(--lh-t1); }
.t2 { font-size: var(--fs-t2); line-height: var(--lh-t2); }
.t3 { font-size: var(--fs-t3); line-height: var(--lh-t3); }
.t4 { font-size: var(--fs-t4); line-height: var(--lh-t4); }
.t5 { font-size: var(--fs-t5); line-height: var(--lh-t5); }
.t6 { font-size: var(--fs-t6); line-height: var(--lh-t6); }
.t7 { font-size: var(--fs-t7); line-height: var(--lh-t7); }

a { color: var(--link); text-decoration: none; cursor: pointer; }
a:hover { color: var(--link-dark); }

code, pre, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }