/* ─────────────────────────────────────────────────────────────
   TOKENS — sergisvk.com design system
   Single source of truth for all CSS custom properties.
   Shared across all pages via <link rel="stylesheet" href="/css/tokens.css">
   ───────────────────────────────────────────────────────────── */

/* ─── LIGHT MODE (default) ─── */
:root {
  /* Palette */
  --bg:        #f4f4f2;
  --surface:   #ffffff;
  --surface-2: #f0f0ee;
  --border:    #e2e2e0;
  --text:      #111111;
  --text-2:    #666666;
  --text-3:    #999999;
  --accent:    #2457F5;
  --accent-fg: #ffffff;

  /* Accent tint utilities — rgba fallback for browsers without color-mix */
  --accent-tint:        rgba(36, 87, 245, 0.10);   /* #2457F5 @ 10% */
  --accent-tint-border: rgba(36, 87, 245, 0.22);   /* #2457F5 @ 22% */

  /* Typography */
  --font:      'DM Sans', system-ui, sans-serif;

  /* Type scale (documented — apply progressively to components) */
  --text-base:  0.9rem;
  --text-sm:    0.82rem;
  --text-xs:    0.72rem;
  --text-2xs:   0.65rem;
  --text-label: 0.7rem;

  /* Border radius scale */
  --r:     10px;  /* primary cards, link buttons */
  --r-xs:   6px;  /* badges, focus rings */
  --r-sm:   8px;  /* secondary buttons, back-nav, controls-bar toggles */
  --r-lg:  14px;  /* avatar bubble, CTA section */
  --r-xl:  17px;  /* pill shapes, decorative elements */

  /* Spacing grid (4px base) */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Layout (page-specific --max is set inline per page) */

  /* Noise texture */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ─── DARK MODE (explicit class) ─── */
html.dark {
  --bg:        #141414;
  --surface:   #202020;
  --surface-2: #292929;
  --border:    #2e2e2e;
  --text:      #f0f0f0;
  --text-2:    #a0a0a0;
  --text-3:    #606060;
  --accent:    #4f80ff;
  --accent-fg: #ffffff;
  /* Accent tint fallback for dark accent (#4f80ff) */
  --accent-tint:        rgba(79, 128, 255, 0.10);
  --accent-tint-border: rgba(79, 128, 255, 0.22);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

/* ─── DARK MODE (system preference fallback) ─── */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bg:        #141414;
    --surface:   #202020;
    --surface-2: #292929;
    --border:    #2e2e2e;
    --text:      #f0f0f0;
    --text-2:    #a0a0a0;
    --text-3:    #606060;
    --accent:    #4f80ff;
    --accent-fg: #ffffff;
    /* Accent tint fallback for dark accent (#4f80ff) */
    --accent-tint:        rgba(79, 128, 255, 0.10);
    --accent-tint-border: rgba(79, 128, 255, 0.22);
    --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  }
}

/* ─── ACCENT TINT: color-mix override (modern browsers) ─── */
/* Overrides the rgba fallbacks above with dynamic values that
   automatically adapt when --accent changes (e.g. dark mode). */
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  :root {
    --accent-tint:        color-mix(in srgb, var(--accent) 10%, transparent);
    --accent-tint-border: color-mix(in srgb, var(--accent) 22%, transparent);
  }
  html.dark {
    --accent-tint:        color-mix(in srgb, var(--accent) 10%, transparent);
    --accent-tint-border: color-mix(in srgb, var(--accent) 22%, transparent);
  }
  @media (prefers-color-scheme: dark) {
    :root:not(.light) {
      --accent-tint:        color-mix(in srgb, var(--accent) 10%, transparent);
      --accent-tint-border: color-mix(in srgb, var(--accent) 22%, transparent);
    }
  }
}