@import "tailwindcss";
@import "tw-animate-css";
@import "@fontsource/dm-sans/300.css";
@import "@fontsource/dm-sans/400.css";
@import "@fontsource/dm-sans/500.css";
@import "@fontsource/sora/400.css";
@import "@fontsource/sora/600.css";
@import "@fontsource/sora/700.css";

/*
  ConsentOS palette (see assets/brand/README.md for the canonical
  reference). Hex values are encoded as-is via Tailwind v4's @theme
  directive — no oklch conversion needed since shadcn/ui consumes
  the CSS variables directly.
*/
:root {
  /* Surfaces & Backgrounds */
  --background: #FFFFFF;          /* page background */
  --foreground: #0E1929;          /* primary text — Ink */
  --card: #FFFFFF;
  --mist: #EEF3FF;                /* Blue tint */
  --surface: #F5F8FC;             /* Surface */

  /* Accent colours */
  --primary: #1B3C7C;             /* Navy — primary brand */
  --primary-foreground: #FFFFFF;
  --action: #2C6AE4;              /* Blue — action / CTA */
  --accent-mid: #4D8AFF;          /* Blue mid — accent / highlight */

  /* Borders */
  --border: #DDE6F4;
  --border-subtle: #EEF3FF;
  --fog: #C4D5FA;
  --input: #DDE6F4;
  --ring: #2C6AE4;

  /* Text hierarchy */
  --text-secondary: #5A6E96;       /* Slate */
  --text-tertiary: #96AECE;        /* Light slate */
  --muted-foreground: #5A6E96;

  /* Status colours */
  --status-success-fg: #0DAA72;    /* Consent green */
  --status-success-bg: #E6F8F1;
  --status-warning-fg: #B45309;
  --status-warning-bg: #FEF3C7;
  --status-error-fg: #B91C1C;
  --status-error-bg: #FEE2E2;
  --status-info-fg: #1B3C7C;
  --status-info-bg: #EEF3FF;

  /* Destructive */
  --destructive: #DC2626;
  --destructive-foreground: #FFFFFF;

  /* Secondary */
  --secondary: #EEF3FF;            /* Blue tint */
  --secondary-foreground: #1B3C7C;

  /* Accent (for hover states) */
  --accent: #EEF3FF;
  --accent-foreground: #1B3C7C;

  /* Radius */
  --radius: 0.5rem;
}

@theme {
  /* Pencil design tokens */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-mist: var(--mist);
  --color-surface: var(--surface);

  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-action: var(--action);
  --color-accent-mid: var(--accent-mid);
  /* Backwards-compat alias: legacy "copper" token now maps to the
     ConsentOS action blue. New code should use ``--color-action``. */
  --color-copper: var(--action);

  --color-border: var(--border);
  --color-border-subtle: var(--border-subtle);
  --color-fog: var(--fog);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-tertiary);
  --color-muted-foreground: var(--muted-foreground);

  --color-status-success-fg: var(--status-success-fg);
  --color-status-success-bg: var(--status-success-bg);
  --color-status-warning-fg: var(--status-warning-fg);
  --color-status-warning-bg: var(--status-warning-bg);
  --color-status-error-fg: var(--status-error-fg);
  --color-status-error-bg: var(--status-error-bg);
  --color-status-info-fg: var(--status-info-fg);
  --color-status-info-bg: var(--status-info-bg);

  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);

  /* Typography */
  --font-heading: "Sora", system-ui, sans-serif;
  --font-sans: "DM Sans", system-ui, sans-serif;

  /* Border radius */
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
}

body {
  @apply bg-background text-foreground antialiased font-sans;
  margin: 0;
  min-height: 100vh;
}