/* ==========================================================================
   01-variables.css — OfiHQ design tokens
   Retrofits the TalentoHQ design system: violant + pink palette, Nunito
   headings and Titillium Web body, brand-tinted shadows. Existing feature
   files (12-verifactu..16-legal) consume the legacy token names, which are
   kept as aliases below so every page keeps rendering without edits.
   ========================================================================== */

:root {
  /* === TALENTOHQ BRAND CORE ============================================ */
  --color-dark-violant:   #1003a3;   /* primary, headings, footer bg */
  --color-pink-thq:       #f06987;   /* accent, link hover */
  --color-light-pink:     #fa6e8c;   /* CTA buttons */
  --color-light-violant:  #f8f8ff;   /* page/header bg */
  --color-light-blue:     #e6e5f6;   /* card bg, input borders */
  --color-medium-violant: #c3c0e8;   /* borders, dividers */

  /* === HQ BLUE SCALE (8 steps) ========================================= */
  --color-hq-blue-50:  #f8f8ff;
  --color-hq-blue-100: #f2f2fa;
  --color-hq-blue-200: #e6e5f6;
  --color-hq-blue-300: #cecbec;
  --color-hq-blue-400: #9e99da;
  --color-hq-blue-500: #6e67c8;
  --color-hq-blue-600: #3f35b5;
  --color-hq-blue-700: #1003a3;

  /* === HQ PINK SCALE (9 steps) ========================================= */
  --color-hq-pink-100: #ffeff3;
  --color-hq-pink-200: #fcdfe6;
  --color-hq-pink-300: #f9c0cc;
  --color-hq-pink-400: #f5a0b3;
  --color-hq-pink-500: #f2809a;
  --color-hq-pink-600: #ef6181;
  --color-hq-pink-700: #fa6e8c;
  --color-hq-pink-800: #bf4e67;
  --color-hq-pink-900: #f06987;

  /* === SEMANTIC FG / BG ================================================ */
  --fg-1: #0b0770;                     /* strongest text */
  --fg-2: var(--color-dark-violant);   /* primary */
  --fg-3: #374151;                     /* body (gray-700) */
  --fg-4: #6b7280;                     /* secondary (gray-500) */
  --fg-accent: var(--color-pink-thq);
  --fg-on-dark: #ffffff;

  --bg-app:     linear-gradient(to right, var(--color-light-violant) 10%, var(--color-light-blue) 90%);
  --bg-page:    #ffffff;
  --bg-surface: var(--color-hq-blue-200);
  --bg-subtle:  var(--color-hq-blue-100);
  --bg-header:  var(--color-light-violant);
  --bg-footer:  var(--color-dark-violant);

  --border-subtle: var(--color-light-blue);
  --border-medium: var(--color-medium-violant);

  /* === BACK-COMPAT ALIASES ============================================= */
  /* Every *.css file below 11- consumes these. Do not rename. */
  --color-page-bg:        var(--color-light-violant);
  --color-card-bg:        #ffffff;

  --color-primary:        var(--color-dark-violant);
  --color-primary-tint:   var(--color-hq-blue-400);
  --color-primary-border: var(--color-hq-blue-300);
  --color-primary-dark:   var(--color-hq-blue-600);

  --color-text:           #1f2937;
  --color-text-secondary: #4b5563;
  --color-text-tertiary:  #6b7280;
  --color-text-inverse:   #ffffff;

  --color-gray-50:  var(--color-hq-blue-50);
  --color-gray-100: var(--color-hq-blue-100);
  --color-gray-200: var(--color-hq-blue-200);
  --color-gray-300: var(--color-hq-blue-300);

  /* Legacy accent names mapped to the TH palette */
  --color-terracotta:  var(--color-pink-thq);
  --color-soft-blue:   var(--color-hq-blue-500);
  --color-warm-beige:  var(--color-light-pink);

  --color-border:       var(--color-hq-blue-200);
  --color-border-light: var(--color-hq-blue-100);

  /* === TYPEFACES ======================================================= */
  --font-display: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Titillium Web", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* === TYPE SCALE ====================================================== */
  --font-size-xs: 0.8125rem;   /* 13px */
  --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-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */
  --font-size-h2: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);   /* → 40px */
  --font-size-h1: clamp(2rem, 1.4rem + 2vw, 3.25rem);        /* → 52px */

  /* === FONT WEIGHTS ==================================================== */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* === LETTER SPACING ================================================== */
  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.02em;
  --letter-spacing-wider:  0.05em;
  --letter-spacing-widest: 0.14em;   /* eyebrow tracking */

  /* === LINE HEIGHTS ==================================================== */
  --line-height-tight:   1.15;
  --line-height-heading: 1.2;
  --line-height-normal:  1.6;

  /* === SPACING ========================================================= */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;

  /* === RADIUS ========================================================== */
  --radius-xs:  4px;      /* buttons, inputs — the TH default */
  --radius-sm:  4px;      /* legacy alias */
  --radius-md:  8px;      /* cards */
  --radius-lg:  12px;     /* pricing card CTA */
  --radius-xl:  16px;     /* pricing cards */
  --radius-2xl: 16px;
  --radius-3xl: 32px;     /* hero feature blocks */
  --radius-pill: 9999px;

  /* === SHADOWS (brand-tinted) ========================================== */
  --shadow-sm:     0 1px 3px rgba(16, 3, 163, 0.08);
  --shadow-md:     0 4px 20px rgba(16, 3, 163, 0.08);
  --shadow-nav:    0px 3px 12px #c3c0e8;                /* header glow */
  --shadow-header: 0px 3px 12px #c3c0e8;
  --shadow-card:   0 0 16px rgba(16, 3, 163, 0.125);    /* 12% violant */
  --shadow-pink:   0 4px 24px rgba(240, 105, 135, 0.12);
  --shadow-lift:   0 18px 40px -12px rgba(16, 3, 163, 0.20);
  --shadow-deep:   0 30px 80px -20px rgba(16, 3, 163, 0.35), 0 12px 30px rgba(16, 3, 163, 0.10);
  --shadow-ring-1: 0 0 0 1px rgb(0 0 0 / 0.05);

  /* === DEEP / SHORT TOKENS (used by hero + dark sections) ============== */
  --color-violant-deep: #0b0770;
  --color-pink-light:   #fa6e8c;       /* re-exported for short alias */

  /* === MOTION ========================================================== */
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 500ms ease;   /* used on CTA bg/color swap */
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;

  /* === LAYOUT ========================================================== */
  --container-max: 1200px;
  --container-wide: 1280px;
  --container-narrow: 800px;
  --container-padding: clamp(20px, 4vw, 80px);
}