/*
 * PIYAVE Labs — design tokens
 * Brand Guidelines Edition 01, section 19. These values are normative.
 *
 * Nothing elsewhere in the codebase may hard-code a colour, size, radius,
 * shadow or duration. If a value is needed and is not here, it is added here
 * first. Section 23: "a review that finds a raw hex or a raw pixel
 * measurement fails."
 */

:root {
  /* ---- Brand ------------------------------------------------------------ */
  --piyave-navy: #0a0f1c;
  --piyave-blue: #1e5bff;

  /* ---- Blue scale — interaction ----------------------------------------- */
  --blue-50:  #eef3ff;
  --blue-100: #dbe5ff;
  --blue-200: #b8cbff;
  --blue-300: #8aa9ff;
  --blue-400: #5583ff;
  --blue-500: #1e5bff;
  --blue-600: #1447db;
  --blue-700: #0f37ae;
  --blue-800: #0d2c85;
  --blue-900: #0e2665;
  --blue-950: #08163c;

  /* ---- Neutral scale — structure ----------------------------------------
   * 950 is Deep Navy. The scale terminates in the brand colour, which is why
   * greys never clash with it: one hue family at different lightness. */
  --neutral-50:  #f6f8fa;
  --neutral-100: #edf0f4;
  --neutral-200: #dce1e9;
  --neutral-300: #bfc7d3;
  --neutral-400: #8d97a8;
  --neutral-500: #667384;
  --neutral-600: #4c586a;
  --neutral-700: #3a4454;
  --neutral-800: #232b38;
  --neutral-900: #141a24;
  --neutral-950: #0a0f1c;

  /* ---- Semantic --------------------------------------------------------- */
  --success: #0e8a5f; --success-bg: #e7f6f0; --success-fg: #08553a;
  --warning: #b45309; --warning-bg: #fdf1e3; --warning-fg: #7c3a05;
  --error:   #c81e1e; --error-bg:   #fdecec; --error-fg:   #8e1414;
  --info:    #1447db; --info-bg:    #eef3ff; --info-fg:    #0f37ae;

  /* ---- Typography ------------------------------------------------------- */
  --font-display: 'Space Grotesk', 'Geist', system-ui, sans-serif;
  --font-body: 'Geist', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, ui-monospace, monospace;

  --text-xs:  0.8125rem;  /* 13 */
  --text-sm:  0.875rem;   /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:  1.125rem;   /* 18 */
  --text-xl:  1.375rem;   /* 22 */
  --text-2xl: 1.75rem;    /* 28 */
  --text-3xl: 2.25rem;    /* 36 */
  --text-4xl: 3rem;       /* 48 */
  --text-5xl: 3.75rem;    /* 60 */
  --text-6xl: 4.5rem;     /* 72 */

  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.04em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-widest: 0.14em;

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

  /* ---- Spacing — 4px base, 8px rhythm ------------------------------------
   * A 20px gap or a 13px padding is a bug, not a decision. */
  --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; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px; --space-40: 160px;

  /* ---- Radius — near-square, following the mark -------------------------- */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 999px;

  /* ---- Shadow — navy-tinted, never black --------------------------------- */
  --shadow-sm: 0 1px 2px rgba(10, 15, 28, 0.06), 0 1px 1px rgba(10, 15, 28, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 15, 28, 0.08), 0 1px 3px rgba(10, 15, 28, 0.06);
  --shadow-lg: 0 12px 28px rgba(10, 15, 28, 0.12), 0 2px 6px rgba(10, 15, 28, 0.06);
  --shadow-xl: 0 24px 56px rgba(10, 15, 28, 0.18), 0 4px 12px rgba(10, 15, 28, 0.08);
  --shadow-focus: 0 0 0 2px #fff, 0 0 0 4px var(--blue-500);

  /* ---- Opacity ----------------------------------------------------------- */
  --opacity-disabled: 0.45;
  --opacity-muted: 0.65;
  --opacity-scrim: 0.6;
  --opacity-grid: 0.06;

  /* ---- Z-index ----------------------------------------------------------- */
  --z-base: 0;    --z-raised: 10;  --z-sticky: 20; --z-dropdown: 30;
  --z-overlay: 40; --z-modal: 50;  --z-drawer: 60; --z-toast: 70; --z-tooltip: 80;

  /* ---- Motion — nothing exceeds 240ms ------------------------------------ */
  --duration-instant: 80ms;
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 240ms;
  --duration-exit: 120ms;
  --duration-pulse: 1400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0.2, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --transition-colors:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);

  /* ---- Layout ------------------------------------------------------------ */
  --container-prose: 720px;
  --container-content: 1200px;
  --container-wide: 1440px;
  --container-app: 1600px;
  --nav-height: 72px;
  --nav-height-mobile: 64px;
  --sidebar-width: 264px;
  --sidebar-collapsed: 56px;
}

/* ---- Semantic layer — light (default) ----------------------------------- */
:root {
  --bg: #ffffff;
  --bg-subtle: var(--neutral-50);
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --border: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --text: var(--neutral-950);
  --text-secondary: var(--neutral-600);
  --text-tertiary: var(--neutral-500);
  --text-disabled: var(--neutral-400);
  --accent: var(--blue-500);
  --accent-hover: var(--blue-600);
  --accent-active: var(--blue-700);
  --accent-subtle: var(--blue-50);
  --accent-fg: #ffffff;
  --ring: var(--blue-500);
  --scrim: rgba(10, 15, 28, 0.6);
}

/* ---- Semantic layer — dark ----------------------------------------------
 * The accent steps to Blue-400. Electric Blue on Navy-950 is 3.5:1 and fails
 * for body text; light-theme accent hexes are never reused on dark grounds. */
[data-theme='dark'] {
  --bg: var(--neutral-950);
  --bg-subtle: var(--neutral-900);
  --surface: var(--neutral-800);
  --surface-raised: #2b3441;
  --border: #2b3441;
  --border-strong: var(--neutral-700);
  --text: var(--neutral-50);
  --text-secondary: var(--neutral-300);
  --text-tertiary: var(--neutral-400);
  --text-disabled: #5a6474;
  --accent: var(--blue-400);
  --accent-hover: var(--blue-300);
  --accent-active: var(--blue-200);
  --accent-subtle: rgba(85, 131, 255, 0.14);
  --accent-fg: var(--neutral-950);
  --ring: var(--blue-400);
  --scrim: rgba(0, 0, 0, 0.7);
}

/* A Navy band inside a light page is a dark context: the same inversion
 * applies so that anything nested in it picks up the correct accent. */
.is-inverted {
  --bg: var(--neutral-950);
  --bg-subtle: var(--neutral-900);
  --surface: var(--neutral-800);
  --surface-raised: #2b3441;
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: var(--neutral-700);
  --text: var(--neutral-50);
  --text-secondary: var(--neutral-300);
  --text-tertiary: var(--neutral-400);
  --accent: var(--blue-400);
  --accent-hover: var(--blue-300);
  --accent-active: var(--blue-200);
  --accent-subtle: rgba(85, 131, 255, 0.14);
  --accent-fg: var(--neutral-950);
  --ring: var(--blue-400);
}

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