/*
  NATIVA Design System — tokens.css
  Single source of truth for every visual value used by NATIVA internal apps.

  Conventions
  - Color tokens are HSL triplets without the hsl() wrapper, so Tailwind can
    compose opacity: `hsl(var(--primary) / 0.15)`.
  - Chart tokens are the official brand hex values, used as-is.
  - Light theme only. Dark mode is out of scope by decision.
  - Brand colors are three: NATIVA purple, black, white. Every grey is a tint
    of black. Status colors are an application extension, not brand colors.
*/

@layer base {
  :root {
    /* ---------- Brand (fixed, never override in an app) ---------- */
    --brand-purple: 243.5 100% 69.8%; /* #6E65FF — Pantone 2725 C (exact) */
    --brand-black: 0 0% 7.1%; /* #121212 — Neutral Black C (exact) */
    --brand-white: 0 0% 100%; /* #FFFFFF */

    /* ---------- Neutral scale ----------
       Tints of brand black with 3% saturation on the brand hue, so greys sit
       next to the purple without looking dirty. They still read as neutral. */
    --neutral-50: 244 12% 98.5%;
    --neutral-100: 244 8% 96.5%;
    --neutral-200: 244 6% 91%;
    --neutral-300: 244 5% 84%;
    --neutral-400: 244 4% 64%;
    --neutral-500: 244 3% 45%;
    --neutral-600: 244 3% 32%;
    --neutral-700: 244 3% 25%;
    --neutral-800: 244 3% 15%;
    --neutral-900: var(--brand-black);

    /* ---------- Semantic roles (what components consume) ---------- */
    --background: var(--neutral-50);
    --foreground: var(--brand-black);

    --card: var(--brand-white);
    --card-foreground: var(--brand-black);

    --popover: var(--brand-white);
    --popover-foreground: var(--brand-black);

    /* Primary = the one action color. CTA, focus ring, selection, active state. */
    --primary: var(--brand-purple);
    --primary-foreground: var(--brand-white);
    --primary-hover: 244 100% 64%;
    --primary-active: 244 100% 58%;

    /* Secondary = black. Second-level actions, emphasis without purple. */
    --secondary: var(--brand-black);
    --secondary-foreground: var(--brand-white);
    --secondary-hover: var(--neutral-800);

    --muted: var(--neutral-100);
    --muted-foreground: 244 3% 40%; /* 5.6:1 on white */

    /* Accent = purple tint for selected rows, hover on menus, highlighted chips. */
    --accent: 244 100% 96%;
    --accent-foreground: 244 70% 38%;

    --border: var(--neutral-200);
    --input: var(--neutral-300);
    --ring: var(--brand-purple);

    /* ---------- Status (application extension, same hue families as IMPACTO+) ---------- */
    /* Use on text, icons and borders. Never as a full background: use the -soft variant. */
    --destructive: 0 74% 42%; /* red-700 #B91C1C */
    --destructive-foreground: var(--brand-white);
    --destructive-soft: 0 86% 97%; /* red-50 */

    --success: 163 94% 24%; /* emerald-700 #047857 */
    --success-foreground: var(--brand-white);
    --success-soft: 152 81% 96%; /* emerald-50 */

    --warning: 26 90% 37%; /* amber-700 #B45309 */
    --warning-foreground: var(--brand-white);
    --warning-soft: 48 100% 96%; /* amber-50 */

    /* ---------- Charts (official brand gradient, 6 steps) ---------- */
    --chart-1: #6f65ff;
    --chart-2: #8677ff;
    --chart-3: #9f98f8;
    --chart-4: #bdb9f9;
    --chart-5: #d8d7fb;
    --chart-6: #efeefd;
    --chart-ink: #121212; /* axes, labels */
    --chart-grid: #e6e6e6; /* gridlines */

    /* ---------- Shape ---------- */
    --radius-sm: 0.375rem; /* 6px  — chips, badges, checkboxes */
    --radius-md: 0.5rem; /* 8px  — buttons, inputs, menus */
    --radius-lg: 0.75rem; /* 12px — cards, dialogs, panels */
    --radius: var(--radius-md);

    /* ---------- Elevation ----------
       Surfaces at rest (cards, buttons, fields) have a border and no shadow.
       Shadows belong to layers that float above the page. */
    --shadow-sm: 0 1px 2px 0 hsl(244 10% 10% / 0.06); /* hover on an interactive card */
    --shadow-md:
      0 4px 12px -4px hsl(244 10% 10% / 0.1), 0 1px 2px 0 hsl(244 10% 10% / 0.06); /* menus, popovers */
    --shadow-lg:
      0 16px 40px -12px hsl(244 10% 10% / 0.18), 0 2px 6px -2px hsl(244 10% 10% / 0.08); /* dialogs, sheets */
    --shadow-floating: 0 20px 44px -16px hsl(244 10% 10% / 0.22); /* toasts, command palette */

    /* ---------- Motion ---------- */
    --duration-fast: 150ms; /* color, opacity */
    --duration-base: 200ms; /* most transitions */
    --duration-slow: 300ms; /* layout, enter/exit of panels */
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);

    /* ---------- Typography ---------- */
    --font-sans: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    /* Type scale actually used in NATIVA apps. Keep to these 8 sizes. */
    --text-2xs: 0.6875rem; /* 11px — eyebrow labels, table meta */
    --text-xs: 0.75rem; /* 12px — helper text, badges */
    --text-sm: 0.875rem; /* 14px — body in dense UI, inputs, buttons */
    --text-base: 1rem; /* 16px — body in reading UI */
    --text-lg: 1.125rem; /* 18px — card titles */
    --text-xl: 1.25rem; /* 20px — section titles */
    --text-2xl: 1.5rem; /* 24px — page titles */
    --text-3xl: 1.875rem; /* 30px — hero numbers, dashboard headline */

    --tracking-eyebrow: 0.16em;
    --tracking-title: -0.01em; /* 24px titles */
    --tracking-display: -0.02em; /* 30px headline numbers */

    /* ---------- Layout ---------- */
    --shell-max-width: 70rem; /* 1120px */
    --shell-gutter: 1rem;
    --shell-gutter-md: 1.5rem;
    --shell-gutter-lg: 2rem;
    --topbar-height: 3.5rem; /* 56px */

    /* ---------- Controls ---------- */
    --control-sm: 2rem; /* 32px */
    --control-md: 2.5rem; /* 40px — default for desktop work tools */
    --control-lg: 2.75rem; /* 44px — touch-heavy flows */
  }
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }

  html {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Inter: single-storey a (cv11). Tabular figures are opt-in via `tabular-nums`. */
    font-feature-settings: 'cv11' 1;
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }

  /* Every focusable element gets the same ring. Components should not redefine it. */
  :focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
  }

  /* On fields the ring hugs the border and the border turns purple: one line, not three. */
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  [role='combobox']:focus-visible {
    outline-offset: 0;
    border-color: hsl(var(--ring));
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@layer components {
  /* The one page container. Width is a token, not a per-page decision. */
  .app-shell {
    margin-inline: auto;
    width: 100%;
    max-width: var(--shell-max-width);
    padding-inline: var(--shell-gutter);
  }
  @media (min-width: 640px) {
    .app-shell {
      padding-inline: var(--shell-gutter-md);
    }
  }
  @media (min-width: 1024px) {
    .app-shell {
      padding-inline: var(--shell-gutter-lg);
    }
  }

  /* Eyebrow: the small uppercase label above a title or a stat. */
  .eyebrow {
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
  }
}