:root {
  /* Font families */
  --font-regular: "gotham";
  --font-light: "gotham-light";
  --font-light-italic: "gotham-light-italics";
  --font-medium: "gotham-medium";
  --font-medium-italic: "gotham-medium-italics";

  /* Font sizes */
  --fs-8: 8px;
  --fs-9: 9px;
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;

  /* Core colors */
  --color-background: #f0f4f8;
  --color-background-alt: #f4f4f4;
  --color-surface: #ffffff;
  --color-text-strong: #1C2436;
  --color-text: #1C2436;
  --color-text-dark: #333333;
  --color-text-dim: #666666;
  --color-text-muted: #555555;
  --color-text-muted-2: #474958;
  --color-text-light: #6B7280;
  --color-placeholder: #d3d3d3;
  --color-text-heading-2: #374151;
  --color-text-subtle: #5C696E;
  --color-text-label: #111216;
  --color-text-modal: #101828;
  --color-text-modal-label: #1B1D28;

  --color-primary: #0AB8F2;
  --color-primary-dark: #089cdb;
  --color-brand: #009FDF;
  --color-brand-accent: #0097DF;
  --color-brand-dark: #0891B2;

  --color-info-border: #CEF1FD;
  --color-info-surface: #F5FCFF;
  --color-info-surface-alt: #F0FBFE;

  --color-border: #DADAE7;
  --color-border-light: #dddddd;
  --color-border-mid: #cccccc;
  --color-border-weak: #eeeeee;
  --color-border-accent: #E0F6FF;
  --color-border-dashed: #f0f0f0;

  /* Status colors */
  --color-success-bg: #E7FEE9;
  --color-success-text: #2FC259;
  --color-error-bg: #FFD6DD;
  --color-error-text: #D80027;
  --color-warning-bg: #FFF9E5;
  --color-warning-text: #B88600;

  /* Note/alert colors */
  --color-note-bg: #FFF9EB;
  --color-note-border: #FFC066;
  --color-note-text: #B86C00;
  /* Semantic extras */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-danger: #e53e3e;
  --color-danger-strong: #B91C1C;
  --color-danger-light: #FEF2F2;
  --color-grey-600: #5C696E;
  --color-grey-400: #cdcdd7;
  --color-muted-bg: #f0f9ff;
  --color-ref-surface: #F1FBFF;
  --color-primary-border-light: #9DE3FB;
  --color-chip-bg: #F3FBFE;
  --color-chip-hover-bg: #e6f7ff;
  --color-camera-dash: #cccccc;
  --color-placeholder-bg: #f0f0f0;
  --color-placeholder-text: #888888;
  --color-select-focus: #4299e1;
  --color-card-blue: #CEF1FD;

  /* Radii */
  --radius-5: 5px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-20: 20px;
  --radius-40: 40px;

  /* Shadows */
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.08);
}