/* ============================================================
   PET-Xi RecruitXI — design tokens

   Extracted from the design prototype. The Pantone references and
   brand commentary are the designer’s own — keep them.

   Do not hardcode a colour, radius, shadow or duration anywhere in
   the app. If a value is missing here, add it here.
   ============================================================ */

/* ============================================================
   PET-Xi — Colour tokens
   The PET-Xi palette is three vivid colours — Pink, Aqua, Green —
   that "reflect the vibrancy and energy of our brand."
   Black & white are secondary. Pink is the lead/primary brand colour
   (the famous "pink tie"). Hex values are the day-to-day digital
   breakdowns from the brand pack; Pantone print refs noted inline.
   ============================================================ */

:root {
  /* ---- Brand core (digital hex) ---- */
  --pink-500: #e31c79;   /* New Brand Pink · PANTONE 213c · primary brand */
  --aqua-500: #279989;   /* New Brand Aqua · PANTONE 7473c */
  --green-500: #97d700;  /* New Brand Green · PANTONE 375c */

  /* ---- Pink ramp ---- */
  --pink-50:  #fde6f1;
  --pink-100: #fbc4dd;
  --pink-200: #f793be;
  --pink-300: #f0589c;
  --pink-400: #e93388;
  --pink-600: #c40f64;
  --pink-700: #9c0c50;
  --pink-800: #6f0939;

  /* ---- Aqua ramp ---- */
  --aqua-50:  #e3f3f0;
  --aqua-100: #b9e1da;
  --aqua-200: #84cabf;
  --aqua-300: #4fb3a4;
  --aqua-400: #2ba291;
  --aqua-600: #1f7d70;
  --aqua-700: #166054;
  --aqua-800: #0e433b;

  /* ---- Green ramp ---- */
  --green-50:  #f3fbe0;
  --green-100: #e3f5b3;
  --green-200: #cdec79;
  --green-300: #b6e23f;
  --green-400: #a6dc1e;
  --green-600: #7eb800;
  --green-700: #5f8a00;
  --green-800: #3f5c00;

  /* ---- Neutrals (Ink → paper) ---- */
  --ink-900: #1a1a18;   /* near-black, body text strongest */
  --ink-800: #202020;   /* Brand Black · R32 G32 B30 */
  --ink-700: #3a3a38;
  --ink-600: #555553;
  --ink-500: #74746f;   /* muted body / captions */
  --ink-400: #9a9a95;
  --ink-300: #c2c2bd;   /* borders strong */
  --ink-200: #e2e2de;   /* borders / dividers */
  --ink-100: #f0f0ed;   /* subtle fill */
  --ink-50:  #f8f8f6;   /* app background */
  --white:   #ffffff;

  /* ---- Semantic status ---- */
  --success: #1f9d57;
  --warning: #f5a623;
  --danger:  #e02424;
  --info:    #279989;   /* uses brand aqua */

  /* Soft (tinted) pairings for the status colours.
     The prototype hardcoded these as hex inside Badge and Alert, bypassing
     the token layer; they belong here so there is one place to change them. */
  --success-soft: #e4f6ec;
  --success-soft-text: #15713e;
  --warning-soft: #fdf0d9;
  --warning-soft-text: #7a5208;
  --danger-soft: #fbe5e5;
  --danger-soft-text: #8e1717;


  /* ============================================================
     Semantic aliases — reference these in UI, not the raw ramps
     ============================================================ */
  --brand-primary: var(--pink-500);
  --brand-primary-hover: var(--pink-600);
  --brand-primary-active: var(--pink-700);
  --brand-secondary: var(--aqua-500);
  --brand-secondary-hover: var(--aqua-600);
  --brand-accent: var(--green-500);
  --brand-accent-hover: var(--green-600);

  --text-strong: var(--ink-900);
  --text-body: var(--ink-800);
  --text-muted: var(--ink-500);
  --text-inverse: var(--white);
  --text-on-brand: var(--white);
  --text-link: var(--pink-600);

  --surface-page: var(--ink-50);
  --surface-card: var(--white);
  --surface-sunken: var(--ink-100);
  --surface-inverse: var(--ink-800);

  --border-subtle: var(--ink-200);
  --border-default: var(--ink-300);
  --border-strong: var(--ink-600);
  --focus-ring: var(--pink-400);
}

/* ============================================================
   PET-Xi — Typography tokens
   Proxima Nova throughout. Brand rule: Light for headlines & key
   messaging; Regular for body. Headlines are tight & punchy.
   Arial is the documented fallback ("everyday" font).
   ============================================================ */

:root {
  --font-sans: "Proxima Nova", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-display: "Proxima Nova", Arial, sans-serif;

  /* Weights (mapped to the supplied OTF cuts) */
  --fw-light: 300;      /* @kind font */
  --fw-regular: 400;    /* @kind font */
  --fw-semibold: 600;   /* @kind font */
  --fw-bold: 700;       /* @kind font */
  --fw-extrabold: 800;  /* @kind font */
  --fw-black: 900;      /* @kind font */

  /* Type scale (1.250 major-third-ish, tuned) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  62px;
  --text-6xl:  80px;

  /* Line heights */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing — straplines & eyebrows are tracked-out caps */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.12em;   /* "FIRING UP YOUR MIND" eyebrow style */
}

/* ============================================================
   PET-Xi — Spacing, radii, shadow & layout tokens
   8px base grid. Generous "safe area" thinking from the brand
   guidelines (logo clear space = height of the 'e').
   ============================================================ */

:root {
  /* Spacing scale (8px base) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radii — friendly but not bubbly. The wordmark's rounded
     terminals inform a soft, confident curve. */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Shadows — soft, low, neutral. Brand uses light paper surfaces;
     elevation is gentle rather than dramatic. */
  --shadow-xs: 0 1px 2px rgba(26, 26, 24, 0.06);
  --shadow-sm: 0 2px 6px rgba(26, 26, 24, 0.08);
  --shadow-md: 0 6px 18px rgba(26, 26, 24, 0.10);
  --shadow-lg: 0 16px 40px rgba(26, 26, 24, 0.14);
  --shadow-pink: 0 8px 24px rgba(227, 28, 121, 0.30);
  --shadow-focus: 0 0 0 3px rgba(240, 88, 156, 0.45);

  /* Layout */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1320px;
  --gutter: var(--space-5);

  /* Motion — bright & lively, never sluggish. Quick ease-out,
     subtle lift on hover, gentle press. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 200ms;   /* @kind other */
  --dur-slow: 320ms;   /* @kind other */
}