/* ==========================================================================
   Worldly (Higg Co) Design System — Design Tokens
   Derived from the hds-shared Angular library.
   Token names mirror the SCSS conventions ($gray-10, $blue-60, etc.)
   so designs stay consistent with production CSS.
   ========================================================================== */

:root {
  /* --- Neutrals ------------------------------------------------------- */
  --white: #ffffff;
  --black: #000000;

  --gray-10: #f5f5f5; /* backgrounds, hover rows, chips */
  --gray-20: #e8e8e8; /* subtle dividers, disabled bg */
  --gray-30: #d0d0d0; /* dividers, progress-bar track, pager borders */
  --gray-40: #c4c4c4; /* borders (inputs default), chip bg */
  --gray-50: #9a9a9a; /* muted controls, placeholder text */
  --gray-75: #6b6b6b; /* secondary text, subtle borders */
  --gray-80: #4a4a4a; /* strong secondary, hover states */
  --gray-90: #2a2a2a; /* action bar borders on dark */

  /* --- Text (semantic) ---------------------------------------------- */
  --text-standard-black: #111111; /* primary body + headings */
  --text-subtle-black: #5a5a5a;   /* secondary labels, captions */

  /* --- Primary / Action (Worldly brand blue) ------------------------ */
  --blue-10: #eaf2fb; /* info banner bg */
  --blue-20: #d7e7f7; /* progress fill track, focus chip */
  --blue-60: #1d81a4; /* primary action, links — from svg-icon */
  --blue-80: #0e5a75; /* link hover, text on blue-20 */
  --blue-accent: #368dd6; /* legacy allocation-bar blue */

  /* --- Brand Red (Worldly logo, destructive, urgency) --------------- */
  --red-brand: #f71414;      /* Worldly logo red */
  --red-60: #b8182c;         /* Assessment RED, error */
  --red-urgency: #b8182c;    /* Tabs active underline */
  --red-urgency-light: #f8d9dd; /* Validation-error bg */
  --red-urgency-dark: #8a1221;  /* Validation-error text */

  /* --- Green (Assessment GREEN, success) ---------------------------- */
  --green-20: #d9f1e7;
  --green-60: #0b835f;       /* Assessment GREEN, success */

  /* --- Yellow (Assessment YELLOW, warn / "truth") ------------------- */
  --yellow-60: #ffc683;      /* Assessment YELLOW */
  --yellow-truth: #e4a23a;
  --yellow-truth-light: #fdf1da;

  /* --- Data-viz / Score colors -------------------------------------- */
  --score-navy: #002e73;     /* score-half, environment score ring */
  --score-purple: #53426e;   /* allocation-bar purple */
  --score-link: #065fd4;     /* compass icon stroke */

  /* --- Legacy "col_XXX" one-offs (from lifecycle-score-card) -------- */
  --col-339: rgba(0, 0, 0, 0.12); /* shadow spread color */
  --col-324: #324a5e;              /* muted title */
  --col-340: #e6f4ef;              /* highlight bg */
  --col-435: #1f3a5f;              /* ffc-linking title */
  --col-black: #111111;

  /* --- Semantic aliases --------------------------------------------- */
  --bg-color: var(--white);
  --bg-subtle: var(--gray-10);
  --bg-elevated: var(--white);
  --border-default: var(--gray-40);
  --border-subtle: var(--gray-30);
  --border-strong: var(--gray-75);
  --fg-primary: var(--text-standard-black);
  --fg-secondary: var(--text-subtle-black);
  --fg-inverse: var(--white);
  --accent: var(--blue-60);
  --accent-hover: var(--blue-80);
  --focus-ring: var(--blue-60);
  --danger: var(--red-60);
  --success: var(--green-60);
  --warn: var(--yellow-truth);

  /* ==========================================================================
     Typography — mirrors typography-variables.scss naming
     Stack: system sans (SCSS variable files were not included in hds-shared,
     so we use a neutral system stack matching the clean, utility look of the
     Worldly app. SUBSTITUTION NOTE in README.)
     ========================================================================== */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-display: 'Poppins', sans-serif; /* bold-heavy brand voice */
  --font-family-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas,
    'Liberation Mono', monospace;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Type scale — keys reference data-empty.scss + higg-text.scss */
  --font-xs:   11px;
  --font-small: 12px;
  --font-base: 14px; /* body default in Angular app */
  --font-lg:   16px;
  --font-xl:   20px;
  --font-2xl:  24px;
  --font-3xl:  32px;
  --font-4xl:  40px;

  --line-height-tight:  1.15;
  --line-height-snug:   1.3;
  --line-height-normal: 1.5;

  /* ==========================================================================
     Spacing — mirrors spacing-variables.scss (spacing-1_0 = 4px step)
     ========================================================================== */
  --spacing-0_5: 2px;
  --spacing-1_0: 4px;
  --spacing-1_5: 6px;
  --spacing-2_0: 8px;
  --spacing-3_0: 12px;
  --spacing-3_5: 14px;
  --spacing-4_0: 16px;
  --spacing-5_0: 20px;
  --spacing-6_0: 24px;
  --spacing-8_0: 32px;
  --spacing-9_0: 36px;
  --spacing-10_0: 40px;
  --spacing-12_0: 48px;

  /* ==========================================================================
     Radii
     ========================================================================== */
  --radius-xs: 2px;
  --radius-sm: 4px;   /* inputs, buttons */
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px; /* chips, status dots, tags */

  /* ==========================================================================
     Shadows
     The Worldly app is flat; elevation is used sparingly.
     ========================================================================== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lifecycle: 0 0 40px -15px rgba(0, 0, 0, 0.12); /* lifecycle-score-card */
  --focus-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--blue-60);
  --focus-shadow-danger: 0 0 0 2px #fff, 0 0 0 4px var(--red-urgency);

  /* ==========================================================================
     Motion
     ========================================================================== */
  --transition-duration: 150ms;
  --transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Webfont — Poppins (local TTF files in fonts/)
   Weights used by the system: 400 / 600 / 700.
   ========================================================================== */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Poppins-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Poppins-Bold.ttf') format('truetype');
}

/* ==========================================================================
   Semantic text classes — matches higg-text.component
   ========================================================================== */
html, body {
  font-family: var(--font-family);
  font-size: var(--font-base);
  color: var(--fg-primary);
  background: var(--bg-color);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font-size: var(--font-4xl); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); letter-spacing: -0.01em; }
h2 { font-size: var(--font-3xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
h3 { font-size: var(--font-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); }
h4 { font-size: var(--font-xl);  font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); }
h5 { font-size: var(--font-lg);  font-weight: var(--font-weight-semibold); line-height: var(--line-height-snug); }
p  { font-size: var(--font-base); line-height: var(--line-height-normal); }
small, .caption { font-size: var(--font-small); color: var(--fg-secondary); }
code, kbd, pre { font-family: var(--font-family-mono); font-size: 0.95em; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }