/*
 * Malanta UI design tokens. CSS custom properties form.
 * Source: Storybook "Foundations / Design Tokens" (Malanta UI v1.0.8).
 * Drop this file into any webapp/HTML page and reference the variables below.
 * Compatible with Tailwind CSS v4's @theme directive if you wrap with @theme { ... }.
 */

:root {
  /* --- Typography --- */
  --font-body:    "Funnel Sans", system-ui, -apple-system, sans-serif;
  --font-heading: "Funnel Display", "Funnel Sans", system-ui, sans-serif;

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

  --text-caption:        0.75rem;  /* 12px */
  --text-body-small:     0.875rem; /* 14px */
  --text-body:           1rem;     /* 16px */
  --text-body-large:     1.125rem; /* 18px */
  --text-heading-small:  1.25rem;  /* 20px */
  --text-heading-medium: 1.5rem;   /* 24px */
  --text-heading-large:  2rem;     /* 32px */
  --text-display:        3rem;     /* 48px */

  /* --- Color · Blue scale --- */
  --color-blue-100: #F0FDFF;
  --color-blue-200: #D9F8FE;
  --color-blue-300: #8CC7DC;
  --color-blue-400: #06B6D4;
  --color-blue-500: #028FC2;
  --color-blue-600: #0E7490;
  --color-blue-700: #155E75;
  --color-blue-800: #164E63;
  --color-blue-900: #012F69;

  /* --- Color · Foundation (Light) --- */
  --color-canvas:    #FAF9F5;
  --color-light-100: #FFFFFF;
  --color-light-200: #F9F9F9;
  --color-light-300: #F2F2F2;
  --color-light-400: #D1D1D1;

  /* --- Color · Foundation (Dark) --- */
  --color-dark-600: #0F3443;
  --color-dark-700: #0D2C38;
  --color-dark-800: #0A212A;
  --color-dark-900: #010B0D;

  /* --- Color · Ascent --- */
  --color-ascent-200: #F6E2D0;
  --color-ascent-300: #FFB37F;
  --color-ascent-400: #BCCCEC;
  --color-ascent-500: #7E78C1;
  --color-ascent-600: #AD009F;
  --color-ascent-700: #1447E6;

  /* --- Color · Semantic backgrounds (badge tones) --- */
  --color-badge-low:        #DCFCE7;
  --color-badge-medium:     #FFF1C8;
  --color-badge-high:       #FCEBD4;
  --color-badge-critical:   #FFE2E2;
  --color-badge-new:        #E1F7FF;
  --color-badge-manual:     #DBEAFE;
  --color-badge-auto:       #F3E8FF;
  --color-badge-reputation: #FFE1FD;

  /* --- Semantic tokens (light mode) ---
     These adapt to dark mode below. Always prefer these over raw palette values in components. */
  --background:  var(--color-canvas);
  --foreground:  var(--color-dark-900);
  --card:        var(--color-light-100);
  --primary:     var(--color-blue-500);
  --secondary:   var(--color-light-200);
  --muted:       var(--color-light-300);
  --accent:      var(--color-blue-100);
  --destructive: #E11D48;
  --border:      var(--color-light-400);
  --ring:        var(--color-blue-500);

  /* --- Border radii --- */
  --radius-button:   6px;
  --radius-badge:    4px;
  --radius-checkbox: 4px;
  --radius-surface:  8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: var(--color-dark-900);
    --foreground: var(--color-light-100);
    --card:       var(--color-dark-800);
    --secondary:  var(--color-dark-700);
    --muted:      var(--color-dark-700);
    --accent:     var(--color-blue-800);
    --border:     var(--color-dark-600);
  }
}

.dark {
  --background: var(--color-dark-900);
  --foreground: var(--color-light-100);
  --card:       var(--color-dark-800);
  --secondary:  var(--color-dark-700);
  --muted:      var(--color-dark-700);
  --accent:     var(--color-blue-800);
  --border:     var(--color-dark-600);
}