/* NoteSeek design tokens
   Three layers per .cursor/skills/design-system/references/token-architecture.md
   Canonical brand = live ns-* palette. Do not use skill cyan/Figtree defaults. */

/* === PRIMITIVES === */
:root {
  /* Brand colors (locked) */
  --color-ns-dark: #130013;
  --color-ns-navy: #160020;
  --color-ns-violet: #392251;
  --color-ns-mid: #755997;
  --color-ns-grey: #6b7280; /* deprecated for body copy; keep for legacy class mapping */
  --color-ns-lavender: #f7f5fa;
  --color-ns-purple: #f0eaf7;
  --color-ns-border: #e8e2f0;
  --color-ns-green: #3d9970;

  /* Audit-gap primitives */
  --color-ns-ink: #3f3a47;
  --color-ns-lilac: #d9cce8;
  --color-ns-green-soft: #edf7f2;
  --color-ns-warn: #c2660a;
  --color-ns-warn-soft: #fff7ed;
  --color-ns-gold: #f0b429;
  --color-ns-on-primary: #ffffff;
  --color-ns-on-primary-muted: #e8e2f0;
  --color-ns-on-primary-subtle: #d9cce8;
  --color-ns-on-dark: #ffffff;
  --color-ns-on-dark-muted: #e8e2f0;
  --color-ns-on-dark-subtle: #c4b8d4;
  --color-ns-border-on-dark: #755997;
  --color-white: #ffffff;

  /* Fonts (locked) */
  --font-display: Inter, system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  /* Type scale: 16px × 1.25 (Major Third) */
  --font-size-caption: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;        /* 14px */
  --font-size-base: 1rem;          /* 16px */
  --font-size-lg: 1.125rem;        /* 18px */
  --font-size-xl: 1.25rem;         /* 20px */
  --font-size-h4: 1.563rem;        /* 25px */
  --font-size-h3: 1.953rem;        /* 31px */
  --font-size-h2: 2.441rem;        /* 39px */
  --font-size-h1: 3.052rem;        /* 49px */
  --font-size-display: 3.815rem;   /* 61px */

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

  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.12em;

  /* 8px spacing scale (4px half-steps only where needed) */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  --radius-sm: 0.5rem;     /* 8px */
  --radius-md: 0.75rem;    /* 12px */
  --radius-lg: 1rem;       /* 16px */
  --radius-xl: 1.5rem;     /* 24px */
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px rgb(19 0 19 / 0.06);
  --shadow-md: 0 4px 16px rgb(57 34 81 / 0.10);
  --shadow-lg: 0 12px 40px rgb(57 34 81 / 0.12);
  --shadow-featured: 0 16px 48px rgb(57 34 81 / 0.18);

  --duration-fast: 160ms;
  --duration-reveal: 350ms;
  --ease-out: ease-out;
  --reveal-offset: 12px;

  /* Nav chrome: 64 mobile / 72 md+ (set in md media query below) */
  --nav-height: 64px;

  --z-base: 1;
  --z-sticky: 20;
  --z-nav: 30;
  --z-dropdown: 40;
  --z-overlay: 40;
  --z-modal: 50;

  --container-max: 75rem; /* 1200px */
  --measure: 65ch;
  --hero-phone-width: 295px;
  --icon-well-size: 3rem; /* 48px */
  --icon-stroke: 2px;
}

/* === SEMANTIC === */
:root {
  --color-background: var(--color-white);
  --color-background-subtle: var(--color-ns-lavender);
  --color-foreground: var(--color-ns-dark);
  --color-text: var(--color-ns-dark);
  --color-text-muted: var(--color-ns-ink);
  --color-text-subtle: var(--color-ns-mid);

  --color-primary: var(--color-ns-violet);
  --color-primary-hover: var(--color-ns-dark);
  --color-primary-active: var(--color-ns-navy);
  --color-primary-foreground: var(--color-ns-on-primary);
  --color-on-primary-muted: var(--color-ns-on-primary-muted);
  --color-on-primary-subtle: var(--color-ns-on-primary-subtle);

  --color-secondary: var(--color-ns-purple);
  --color-accent: var(--color-ns-mid);
  --color-muted: var(--color-ns-lavender);
  --color-border: var(--color-ns-border);
  --color-ring: var(--color-ns-violet);

  --color-success: var(--color-ns-green);
  --color-success-soft: var(--color-ns-green-soft);
  --color-warning: var(--color-ns-warn);
  --color-warning-soft: var(--color-ns-warn-soft);

  --color-on-dark: var(--color-ns-on-dark);
  --color-on-dark-muted: var(--color-ns-on-dark-muted);
  --color-on-dark-subtle: var(--color-ns-on-dark-subtle);

  --spacing-gutter: var(--space-4);
  --spacing-section: var(--space-16);
  --spacing-section-tight: var(--space-12);
  --spacing-component: var(--space-4);

  --font-heading: var(--font-display);
}

@media (min-width: 640px) {
  :root { --spacing-gutter: var(--space-6); }
}

@media (min-width: 768px) {
  :root {
    --nav-height: 72px;
    --spacing-section: var(--space-20);
  }
}

@media (min-width: 1024px) {
  :root {
    --spacing-gutter: var(--space-12); /* 48px — replaces md:px-[106px] in later slices */
    --spacing-section: var(--space-24);
  }
}

/* === COMPONENTS === */
:root {
  --button-height-md: 2.75rem; /* 44px */
  --button-height-lg: 3rem;    /* 48px */
  --button-padding-x: var(--space-5);
  --button-radius: var(--radius-full);
  --button-font-size: var(--font-size-base);
  --button-font-weight: var(--font-weight-semibold);
  --button-bg: var(--color-primary);
  --button-fg: var(--color-primary-foreground);
  --button-hover-bg: var(--color-primary-hover);
  --button-active-bg: var(--color-primary-active);
  --button-ghost-fg: var(--color-primary);
  --button-ghost-border: var(--color-primary);
  --button-ghost-hover-bg: var(--color-secondary);
  --button-ghost-active-bg: var(--color-muted);
  --button-focus-ring: var(--color-ring);
  --button-focus-ring-on-primary: var(--color-ns-on-primary-muted);

  --card-bg: var(--color-white);
  --card-fg: var(--color-foreground);
  --card-border: var(--color-border);
  --card-radius: var(--radius-xl);
  --card-padding: var(--space-8);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);
  --card-featured-bg: var(--color-primary);
  --card-featured-fg: var(--color-primary-foreground);
  --card-featured-shadow: var(--shadow-featured);
  --badge-bg: var(--color-white);
  --badge-fg: var(--color-primary);
  --badge-radius: var(--radius-full);

  --nav-bg: rgb(247 245 250 / 0.92);
  --skip-link-bg: var(--color-primary);
  --skip-link-fg: var(--color-primary-foreground);

  --table-header-bg: var(--color-muted);
  --table-header-fg: var(--color-text);
  --table-border: var(--color-border);
  --table-cell-padding-x: var(--space-4);
  --table-cell-padding-y: var(--space-3);
}