/* Tosin Portal — design tokens */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Surfaces */
  --bg: #F4F2EC;          /* canvas warm off-white */
  --bg-2: #ECE9E1;        /* recessed */
  --surface: #FFFFFF;
  --surface-2: #FBFAF6;
  --surface-3: #F7F5EF;

  /* Text */
  --ink: #14161A;
  --ink-2: #3A3D44;       /* secondary */
  --ink-3: #6A6E76;       /* tertiary */
  --ink-4: #9AA0A8;       /* quaternary / placeholder */
  --on-accent: #FFFFFF;

  /* Borders / dividers */
  --line: #E5E2DA;
  --line-2: #D6D2C7;
  --line-strong: #2A2D33;

  /* Accent — industrial steel blue */
  --accent: #1F3A5F;       /* primary action */
  --accent-2: #2E5588;     /* hover */
  --accent-soft: #E5EBF3;  /* tinted bg */
  --accent-ink: #14223A;

  /* Semantic */
  --pos: #1F6B3A;
  --pos-soft: #E1EFE3;
  --neg: #B53D2E;
  --neg-soft: #F5E2DE;
  --warn: #8A6B14;
  --warn-soft: #F2EAD0;
  --info: #1F4E7A;
  --info-soft: #E0E9F2;

  /* Type */
  --font-sans: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Microsoft JhengHei", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radius */
  --r-1: 3px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 14px;

  /* Shadow (soft, for surfaces) */
  --sh-1: 0 1px 0 rgba(20,22,26,0.04), 0 1px 2px rgba(20,22,26,0.04);
  --sh-2: 0 1px 0 rgba(20,22,26,0.04), 0 4px 12px rgba(20,22,26,0.06);
  --sh-3: 0 8px 32px rgba(20,22,26,0.10);
}

/* Reset within an artboard */
.tp * {
  box-sizing: border-box;
}
.tp {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1, "ss01" 1;
}
.tp .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; }

/* Logo mark — neutralised version of the existing waveform */
.tp-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.tp-logo svg { display: block; }