/* Workajobic — shared design tokens
 * Mirrors @theme block from /workajobic website/app/globals.css.
 * Consume via CSS custom properties; no Tailwind required. */

:root {
  /* Brand — sampled from Workajobic logo (red gradient W) */
  --color-brand-50:  #fff1ef;
  --color-brand-100: #ffe1dc;
  --color-brand-200: #ffc1b6;
  --color-brand-300: #ff9a86;
  --color-brand-400: #fc6b50;
  --color-brand-500: #fc4c2d;
  --color-brand-600: #e11d2e;
  --color-brand-700: #b8121f;
  --color-brand-800: #8e0d18;
  --color-brand-900: #5e0810;

  /* Editorial neutrals — warm off-white, deep ink */
  --color-canvas:      #faf9f6;
  --color-canvas-tint: #f2efe9;
  --color-ink:         #0d0c0a;
  --color-ink-soft:    #2a2925;
  --color-mute:        #6b6862;
  --color-rule:        #1c1b18;

  /* Hairlines pre-mixed with transparency for direct use in borders */
  --rule-12: color-mix(in oklab, var(--color-ink) 12%, transparent);
  --rule-15: color-mix(in oklab, var(--color-ink) 15%, transparent);
  --rule-25: color-mix(in oklab, var(--color-ink) 25%, transparent);

  /* Status — warmer/earthier than default green/amber/red so they sit
   * comfortably on the canvas and next to brand-600. */
  --color-success:    #3d7a4b;
  --color-success-bg: #e6f0e3;
  --color-warning:    #8b5a17;
  --color-warning-bg: #f7ecd6;
  --color-danger:     #b8121f;
  --color-danger-bg:  #ffe1dc;

  /* Radii */
  --radius-card: 14px;
  --radius-pill: 999px;
  --radius-input: 8px;

  /* Type */
  --font-sans:    'Switzer', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-serif:   'Instrument Serif', ui-serif, Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Shadow scale */
  --shadow-card: 0 8px 30px -12px rgba(13, 12, 10, 0.10);
  --shadow-pop:  0 18px 50px -20px rgba(13, 12, 10, 0.22);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-feature-settings: 'ss01', 'ss02', 'cv01', 'cv11';
  line-height: 1.5;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-feature-settings: 'ss01';
}

::selection {
  background-color: var(--color-brand-600);
  color: white;
}

:focus-visible {
  outline: 2px solid var(--color-brand-600);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Tabular numerals for KPI / financial figures */
.tabular { font-variant-numeric: tabular-nums; }

/* Hairline rule used in editorial layouts */
.rule { border-color: var(--rule-12); }

/* Brand gradient text + bg — re-used from website */
.text-gradient-brand {
  background: linear-gradient(95deg, var(--color-brand-600), var(--color-brand-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bg-gradient-brand {
  background: linear-gradient(135deg, var(--color-brand-600) 0%, var(--color-brand-500) 100%);
}