/*
 * Flow Design System — colors_and_type.css
 *
 * Core design tokens extracted from accounting/webapp/src/app/globals.css.
 * Organized as 3 layers (primitives → semantic → component aliases) plus type.
 * Use Layer 2/3 in code; Layer 1 only to compose new tokens.
 */

/* -------------------------------------------------------------------------- */
/* Fonts                                                                      */
/* -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Suisse Screen';
  src: url('fonts/SuisseScreen-Light-WebXL.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisse Screen';
  src: url('fonts/SuisseScreen-Regular-WebXL.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisse Screen';
  src: url('fonts/SuisseScreen-RegularItalic-WebXL.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Suisse Screen';
  src: url('fonts/SuisseScreen-Medium-WebXL.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisse Screen';
  src: url('fonts/SuisseScreen-SemiBold-WebXL.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisse Screen';
  src: url('fonts/SuisseScreen-Bold-WebXL.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisse Screen Mono';
  src: url('fonts/SuisseScreen-Monitor-WebXL.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ivy Presto';
  src: url('fonts/IvyprestoDisplay-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ivy Presto';
  src: url('fonts/IvyprestoDisplay-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------------------- */
  /* Layer 1 — Primitives (do not use in feature code)                      */
  /* ---------------------------------------------------------------------- */

  /* Primary (blue) */
  --primary-0:   hsl(214, 100%, 99%);
  --primary-25:  hsl(217, 100%, 97%);
  --primary-50:  hsl(213, 100%, 96%);
  --primary-100: hsl(215, 100%, 93%);
  --primary-200: hsl(217, 97%, 87%);
  --primary-300: hsl(217, 96%, 80%);
  --primary-400: hsl(217, 94%, 74%);
  --primary-500: hsl(217, 92%, 67%);
  --primary-600: hsl(219, 60%, 55%);
  --primary-700: hsl(222, 58%, 43%);
  --primary-800: hsl(227, 66%, 32%);
  --primary-900: hsl(237, 78%, 22%);

  /* Grey (warm-tinted neutrals, ~30° hue shift) */
  --grey-0:   hsl(0, 0%, 99.2%);
  --grey-25:  hsl(30, 11%, 96%);
  --grey-50:  hsl(30, 8%, 95%);
  --grey-100: hsl(30, 4%, 91%);
  --grey-200: hsl(30, 2%, 83%);
  --grey-300: hsl(30, 2%, 75%);
  --grey-400: hsl(30, 1%, 67%);
  --grey-500: hsl(30, 1%, 60%);
  --grey-600: hsl(30, 1%, 47%);
  --grey-700: hsl(30, 1%, 35%);
  --grey-800: hsl(20, 3%, 23%);
  --grey-900: hsl(30, 6%, 12%);

  /* Secondary (functional) */
  --secondary-green-50:  hsl(145, 35%, 90%);
  --secondary-green-900: hsl(158, 63%, 17%);
  --secondary-red-50:    hsl(5,   87%, 94%);
  --secondary-red-900:   hsl(331, 97%, 14%);

  /* Tertiary (tag + chart palette) */
  --tertiary-peach-50:    hsl(34,  100%, 92%);
  --tertiary-peach-900:   hsl(16,  91%,  38%);
  --tertiary-teal-50:     hsl(185, 96%,  90%);
  --tertiary-teal-900:    hsl(196, 64%,  24%);
  --tertiary-slate-50:    hsl(210, 40%,  96%);
  --tertiary-slate-900:   hsl(222, 47%,  11%);
  --tertiary-lime-50:     hsl(80,  100%, 89%);
  --tertiary-lime-900:    hsl(85,  95%,  35%);
  --tertiary-cherry-50:   hsl(340, 100%, 95%);
  --tertiary-cherry-900:  hsl(339, 97%,  37%);
  --tertiary-violet-50:   hsl(287, 100%, 95%);
  --tertiary-violet-900:  hsl(297, 64%,  28%);
  --tertiary-eggplant-50: hsl(250, 100%, 98%);
  --tertiary-eggplant-900:hsl(264, 67%,  35%);

  /* ---------------------------------------------------------------------- */
  /* Layer 2 — Semantic tokens (use these first)                             */
  /* ---------------------------------------------------------------------- */

  --background: var(--grey-25);
  --foreground: var(--grey-900);

  --card: var(--grey-0);
  --card-foreground: var(--grey-900);

  --popover: var(--grey-0);
  --popover-foreground: var(--grey-800);

  --primary: var(--primary-900);
  --primary-foreground: var(--grey-0);
  --primary-foreground-light: var(--primary-50);

  --secondary: var(--grey-100);
  --secondary-foreground: var(--grey-900);

  --muted: var(--grey-100);
  --muted-foreground: var(--grey-600);
  --accent: var(--grey-50);
  --accent-foreground: var(--grey-800);

  --destructive: var(--secondary-red-900);
  --destructive-foreground: var(--secondary-red-50);
  --warning-light: var(--tertiary-peach-900);
  --warning-foreground-light: var(--tertiary-peach-50);
  --success-light: var(--secondary-green-900);
  --success-foreground-light: var(--secondary-green-50);
  --info-light: var(--primary-700);
  --info-foreground-light: var(--primary-50);

  --border: var(--grey-100);
  --border-hover: var(--grey-200);
  --border-strong: var(--grey-300);
  --input: var(--grey-0);
  --input-border: var(--grey-100);
  --ring: var(--grey-200);

  --subtle-foreground: var(--grey-400);
  --link-foreground: var(--primary-600);
  --link-foreground-hover: var(--primary-700);

  /* ---------------------------------------------------------------------- */
  /* Layer 3 — Component aliases                                             */
  /* ---------------------------------------------------------------------- */

  --status-success: var(--secondary-green-50);
  --status-success-foreground: var(--secondary-green-900);
  --status-warning: var(--tertiary-peach-50);
  --status-warning-foreground: var(--tertiary-peach-900);
  --status-danger:  var(--secondary-red-50);
  --status-danger-foreground:  var(--secondary-red-900);

  --badge-secondary: var(--grey-50);
  --badge-secondary-foreground: var(--grey-700);
  --badge-tertiary: var(--tertiary-violet-50);
  --badge-tertiary-foreground: var(--tertiary-violet-900);
  --badge-complete: var(--secondary-green-50);
  --badge-complete-foreground: var(--secondary-green-900);
  --badge-pending:  var(--primary-100);
  --badge-pending-foreground:  var(--primary-900);
  --badge-partial:  var(--tertiary-peach-50);
  --badge-partial-foreground:  var(--tertiary-peach-900);

  --button-background: var(--primary-900);
  --button-foreground: var(--primary-25);
  --button-ghost-hover: var(--grey-100);
  --button-ghost-foreground: var(--grey-900);
  --button-ghost-primary: var(--primary-50);
  --button-ghost-primary-hover: var(--primary-100);
  --button-ghost-primary-foreground: var(--primary-900);
  --button-outline: var(--grey-0);
  --button-outline-foreground: var(--grey-900);
  --button-outline-border: var(--grey-100);
  --button-outline-border-hover: var(--grey-200);
  --button-destructive-light: var(--secondary-red-50);
  --button-destructive-light-foreground: var(--secondary-red-900);

  --sidebar: var(--grey-0);
  --sidebar-foreground: var(--grey-900);
  --sidebar-accent: var(--grey-50);
  --sidebar-border: var(--grey-100);

  --table-header-background: var(--grey-200);
  --table-header-foreground: var(--grey-700);
  --data-grid-row-hover: var(--grey-25);
  --cell-border: var(--grey-100);
  --cell-border-hover: var(--grey-500);

  --tooltip: var(--grey-700);
  --tooltip-foreground: var(--grey-0);
  --code-block-background: var(--grey-900);
  --code-block-foreground: var(--grey-0);
  --tag-label-background: var(--tertiary-violet-50);
  --tag-label-foreground: var(--tertiary-violet-900);
  --search-highlight: var(--tertiary-peach-50);

  /* Charts */
  --chart-1: var(--tertiary-peach-900);
  --chart-2: var(--tertiary-teal-900);
  --chart-3: var(--tertiary-slate-900);
  --chart-4: var(--tertiary-lime-900);
  --chart-5: var(--tertiary-cherry-900);

  /* ---------------------------------------------------------------------- */
  /* Typography                                                              */
  /* ---------------------------------------------------------------------- */

  --font-sans: 'Suisse Screen', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Ivy Presto', 'Suisse Screen', Georgia, serif;
  --font-mono: 'Suisse Screen Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (Tailwind-compatible) */
  --text-xs:   0.75rem;   /* 12px — minimum */
  --text-sm:   0.875rem;  /* 14px — default body */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;   /* primary */
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* Spacing (Tailwind scale echo) */
  --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;

  /* Shadows (shadcn/tailwind defaults — used in popovers, dialogs) */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* -------------------------------------------------------------------------- */
/* Semantic element defaults                                                  */
/* -------------------------------------------------------------------------- */

body {
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--text-sm);
  line-height: 1.5;
}

h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-5xl); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-4xl); line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-family: var(--font-sans);    font-weight: 600; font-size: var(--text-xl);  line-height: 1.3; }
h4 { font-family: var(--font-sans);    font-weight: 600; font-size: var(--text-lg);  line-height: 1.35; }
h5 { font-family: var(--font-sans);    font-weight: 500; font-size: var(--text-base);line-height: 1.4; }
h6 { font-family: var(--font-sans);    font-weight: 500; font-size: var(--text-sm);  line-height: 1.4; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); }

p  { font-size: var(--text-sm); line-height: 1.55; color: var(--foreground); }
small, .caption { font-size: var(--text-xs); color: var(--muted-foreground); }

a  { color: var(--link-foreground); text-decoration: none; }
a:hover { color: var(--link-foreground-hover); text-decoration: underline; }

code, pre, .mono, .tabular {
  font-family: var(--font-mono);
}
.tabular-nums { font-variant-numeric: tabular-nums; }

hr { border: 0; border-top: 1px solid var(--border); }