/* =============================================================
   CDSS3 — Colors & Type tokens
   Source of truth: libs/design-system/tailwind.config.ts (THEME_FONT_COLORS, THEME_FONT_SIZES)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,400;1,500;1,700&display=swap');

:root {
  /* ---------- Primary (HGC Orange) ---------- */
  --primary-100: #fff5da;
  --primary-200: #ffe7b6;
  --primary-300: #ffd792;
  --primary-400: #ffc777;
  --primary-500: #ffac4a;   /* DEFAULT — the primary orange (`bg-primary`): peek layer, pills, tab underline, `orange` button fill */
  --primary-600: #ff964a;
  --primary-700: #ff813a;
  --primary-800: #fe6d1b;
  --primary-900: #e65300;   /* DEEP accent — focus borders, links, selected text/emphasis. NOT the default fill. */
  --primary-1000: #f9d17b;
  --primary-brand-mark: #F7971D; /* logo orange */

  /* ---------- Secondary (Ink) ---------- */
  --secondary-100: #ffffff;
  --secondary-500: #30302f;  /* DEFAULT — brand ink, default body text */
  --secondary-900: #000000;  /* pure black — the `primary` BUTTON fill */
  --ink: #000000;            /* alias for secondary-900: primary button body */

  /* ---------- Tertiary (Sky — used for "secondary" actions, info accents) ---------- */
  --tertiary-100: #ccf9ff;
  --tertiary-200: #99edff;
  --tertiary-300: #66daff;
  --tertiary-400: #3fc5ff;
  --tertiary-500: #00a3ff;   /* DEFAULT */
  --tertiary-600: #007edb;
  --tertiary-700: #005eb7;
  --tertiary-800: #004393;
  --tertiary-900: #002f7a;

  /* ---------- Grey scale ---------- */
  --grey-50:  #f0f0f0;
  --grey-100: #f2f2f2;
  --grey-200: #dedede;
  --grey-300: #c6c6c6;
  --grey-400: #acacac;
  --grey-500: #949494;   /* DEFAULT */
  --grey-600: #636363;
  --grey-700: #313131;

  /* ---------- Common / surface ---------- */
  --common-black:   #000000;
  --common-white:   #ffffff;
  --common-bg:      #f7f7f7;   /* app background */
  --common-disable: #f0f0f0;
  --common-divider: #DEDEDE;

  /* ---------- Status ---------- */
  --status-danger:    #ff271c;
  --status-info:      #0075ff;
  --status-success:   #1cc500;
  --status-warning:   #ffe600;
  --status-connected: #57B62D;

  /* ---------- Other ---------- */
  --other-orange: #FCA235;

  /* ---------- Typography scale ---------- */
  --font-sans: 'Roboto', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;

  --fs-t0:       5.375rem;  /* 86px */
  --fs-t1:       4.25rem;   /* 68px */
  --fs-t2:       3.375rem;  /* 54px */
  --fs-t3:       2.75rem;   /* 44px */
  --fs-t4:       2.188rem;  /* 35px */
  --fs-t5:       1.75rem;   /* 28px */
  --fs-t6:       1.375rem;  /* 22px */
  --fs-body:     1.125rem;  /* 18px */
  --fs-remark:   0.938rem;  /* 15px */
  --fs-footnote: 0.813rem;  /* 13px */
  --fs-mini:     0.688rem;  /* 11px */

  /* ---------- Elevation (from tailwind.config.ts boxShadow) ---------- */
  --shadow-button-primary:    4px 4px 24px 0px rgba(255,172,74,.40);
  --shadow-button-secondary:  4px 4px 24px 0px rgba(0,163,255,.20);
  --shadow-button-blank:      4px 4px 24px 0px rgba(0,0,0,.20);
  --shadow-button-common:     0 0 8px 0 rgba(0,0,0,.16);
  --shadow-card:              0 4px 32px 0 rgba(0,0,0,.12);
  --shadow-dot:               0 0 8px 0 rgba(0,0,0,.16);
  --shadow-contact-window:    4px 0 40px 0 rgba(0,0,0,.08);
  --shadow-contact-item:      0 0 16px 0 rgba(255,172,74,.40);
  --shadow-chat-window-input: 0 -4px 16px 0 rgba(0,0,0,.24);
  --shadow-field:             0 0 24px 0 rgba(230,83,0,.12);
  --shadow-tab-selected:      inset 0 -2px 0 0 rgba(255,172,74,1);

  /* ---------- Radii (observed: rounded / rounded-md / rounded-lg / rounded-full = 0/0.25/0.375/0.5/9999) ---------- */
  --radius-sm: 2px;
  --radius:    4px;    /* most inputs, buttons */
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* ---------- Spacing scale (matches tailwind numeric scale) ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ---------- Layout constants ---------- */
  --h-header: 64px;
  --h-field:  51px;   /* explicit from tailwind.config.ts height.field */
}

/* Baseline */
html, body {
  font-family: var(--font-sans);
  color: var(--secondary-500);
  background: var(--common-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Type utility classes — match THEME_FONT_SIZES */
.t0       { font-size: var(--fs-t0);       line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.t1       { font-size: var(--fs-t1);       line-height: 1.08; font-weight: 700; letter-spacing: -0.015em; }
.t2       { font-size: var(--fs-t2);       line-height: 1.1;  font-weight: 700; letter-spacing: -0.01em;  }
.t3       { font-size: var(--fs-t3);       line-height: 1.15; font-weight: 700; }
.t4       { font-size: var(--fs-t4);       line-height: 1.2;  font-weight: 700; }
.t5       { font-size: var(--fs-t5);       line-height: 1.25; font-weight: 500; }
.t6       { font-size: var(--fs-t6);       line-height: 1.3;  font-weight: 500; }
.body     { font-size: var(--fs-body);     line-height: 1.45; font-weight: 400; }
.remark   { font-size: var(--fs-remark);   line-height: 1.5;  font-weight: 400; }
.footnote { font-size: var(--fs-footnote); line-height: 1.5;  font-weight: 400; }
.mini     { font-size: var(--fs-mini);     line-height: 1.45; font-weight: 500; letter-spacing: 0.02em; }