/* /styles/tokens.css */
:root {
  /* Colors */
  --color-bg-page:        #f6f6f6;
  --color-text:           #222222;
  --color-bg-header:      #2c3e50;
  --color-text-header:    #ffffff;
  --color-accent:         #2c3e50; 
  --color-link:           #0b76cf;

  --color-card-bg:        #ffffff;
  --color-card-border:    #e2e2e2;
  --color-rule:           var(--color-accent);

  /* Typography */
  /* Families */
  --font-family-body: "Inter", -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-family-display: "Inter", -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Sizes (scale) */
  --font-size-0: 0.875rem; /* 14 */
  --font-size-1: 1rem;     /* 16 (base) */
  --font-size-2: 1.25rem;  /* 20 */
  --font-size-3: 1.5rem;   /* 24 */
  --font-size-4: 2rem;     /* 32 */

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-body: 1.5;

  /* Weights */
  --weight-regular: 400;
  --weight-bold: 700;

  /* Spacing */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;

  /* Radius */
  --radius-1: 8px;
  /* Borders */
  --border-1: 1px solid var(--color-card-border);
  --border-thick: 3px solid var(--color-rule);

  
}

body.dark-mode {
  /* Page & text */
  --color-bg-page:        #0e1116;  /* deep gray-blue */
  --color-text:           #e8eaed;  /* near white */

  /* Header */
  --header-bg:            #141a22;
  --header-text:          #e8eaed;

  /* Cards / surfaces */
  --color-card-bg:        #151922;
  --border-1:             1px solid #2a3140;
  --border-thick:         3px solid #2a3140;

  /* Accents & links */
  --color-accent:         #8ab4f8;  /* soft blue */
  --color-link:           var(--color-accent);
}