/* =========================================================================
   Adalya Talent — Design System
   Base colors, typography, spacing, shadows, radii
   ========================================================================= */

/* ---------- Fonts ----------
   Display:  Space Grotesk      (geometric sans, bold weights, industrial feel)
   Body:     Inter              (clean humanist sans, great FR diacritic support)
   Mono:     JetBrains Mono     (for technical specs, job codes)

   NOTE: These are Google Fonts substitutes. No proprietary Adalya fonts exist
   in the current Google Sites build. If the user has a preferred brand font,
   swap the @font-face / font-family declarations below.
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ===== COLOR — base palette ===== */

  /* Signature orange — Adalya's existing brand orange.
     Industrial safety-orange family, slightly warm, high energy.
     Reads as the brand on cream, on black, and over photography. */
  --ada-orange:        #E85D2C;   /* signature */
  --ada-orange-deep:   #C44A1F;   /* hover / pressed */
  --ada-orange-soft:   #FFE4D6;   /* tints, highlight backgrounds */
  --ada-orange-glow:   #FF7A3E;   /* lighter accent, links on dark */

  /* Legacy aliases — kept so existing components don't break.
     Both --ada-yellow* and --ada-orange* resolve to the orange ramp. */
  --ada-yellow:        var(--ada-orange);
  --ada-yellow-deep:   var(--ada-orange-deep);
  --ada-yellow-soft:   var(--ada-orange-soft);

  /* Ink — true near-black for max contrast against yellow + cream */
  --ada-ink:           #0B0B0B;
  --ada-ink-2:         #1A1A1A;
  --ada-ink-3:         #2D2D2D;

  /* Neutrals — warm cream rather than cold gray */
  --ada-cream:         #F5F1EA;   /* page background alt */
  --ada-paper:         #FAF7F1;   /* card / panel background */
  --ada-line:          #E6E0D4;   /* hairline borders on cream */
  --ada-line-strong:   #C9C2B2;

  /* Grays — when we need true neutral (over photography, etc) */
  --ada-gray-100:      #F4F4F4;
  --ada-gray-200:      #E5E5E5;
  --ada-gray-400:      #A3A3A3;
  --ada-gray-600:      #525252;
  --ada-gray-800:      #262626;

  /* White */
  --ada-white:         #FFFFFF;

  /* Semantic — used sparingly */
  --ada-success:       #1B7F4F;
  --ada-danger:        #B91C1C;

  /* ===== SEMANTIC color tokens ===== */
  --bg-page:           var(--ada-cream);
  --bg-elevated:       var(--ada-paper);
  --bg-inverse:        var(--ada-ink);
  --bg-accent:         var(--ada-orange);

  --fg-primary:        var(--ada-ink);
  --fg-secondary:      var(--ada-ink-3);
  --fg-muted:          var(--ada-gray-600);
  --fg-inverse:        var(--ada-cream);
  --fg-on-accent:      var(--ada-ink);   /* text sits on yellow */

  --border-subtle:     var(--ada-line);
  --border-strong:     var(--ada-ink);

  /* ===== TYPE — families ===== */
  --font-display:      'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:         'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:         'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ===== TYPE — fluid scale ===== */
  /* Display sizes lean BIG — Responsum-inspired editorial scale */
  --fs-display-xl:     clamp(3.5rem,  7vw, 7rem);     /* hero — 56–112px */
  --fs-display-lg:     clamp(2.75rem, 5vw, 4.5rem);   /* section openers — 44–72px */
  --fs-display-md:     clamp(2rem,    3.5vw, 3rem);   /* major headings — 32–48px */
  --fs-h1:             clamp(2rem,    3vw, 2.75rem);  /* 32–44px */
  --fs-h2:             clamp(1.5rem,  2.2vw, 2rem);   /* 24–32px */
  --fs-h3:             1.25rem;                       /* 20px */
  --fs-h4:             1.0625rem;                     /* 17px */
  --fs-body:           1rem;                          /* 16px */
  --fs-small:          0.875rem;                      /* 14px */
  --fs-micro:          0.75rem;                       /* 12px — eyebrow, label */

  /* ===== TYPE — leading / tracking ===== */
  --lh-tight:          1.02;
  --lh-display:        1.05;
  --lh-heading:        1.15;
  --lh-body:           1.55;
  --lh-loose:          1.7;

  --tracking-tight:    -0.02em;
  --tracking-display:  -0.025em;   /* big sizes get tighter */
  --tracking-normal:   0;
  --tracking-eyebrow:  0.18em;     /* ALL-CAPS labels */

  /* ===== SPACING ===== */
  --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;
  --space-11: 160px;

  /* ===== RADII =====
     Tight, almost-square. Yellow chips and CTAs use pill radius. */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* ===== SHADOWS =====
     Restrained. Mostly used to lift cards on cream pages. */
  --shadow-1: 0 1px 2px rgba(11, 11, 11, 0.06);
  --shadow-2: 0 2px 6px rgba(11, 11, 11, 0.08);
  --shadow-3: 0 10px 24px -8px rgba(11, 11, 11, 0.18);
  --shadow-4: 0 24px 48px -12px rgba(11, 11, 11, 0.25);

  /* Inner shadow used on yellow CTA pressed state */
  --shadow-inset: inset 0 2px 0 rgba(0, 0, 0, 0.08);

  /* ===== BORDERS ===== */
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;  /* signature thick black border on cards */

  /* ===== MOTION ===== */
  --ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   140ms;
  --duration-base:   220ms;
  --duration-slow:   400ms;

  /* ===== LAYOUT ===== */
  --container-max:    1280px;
  --container-pad:    clamp(20px, 4vw, 64px);
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES — apply these via classes or element selectors
   ========================================================================= */

.ada-display-xl,
.ada-display-lg,
.ada-display-md {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-primary);
  text-wrap: balance;
}
.ada-display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-tight); }
.ada-display-lg { font-size: var(--fs-display-lg); }
.ada-display-md { font-size: var(--fs-display-md); }

.ada-h1, .ada-h2, .ada-h3, .ada-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}
.ada-h1 { font-size: var(--fs-h1); }
.ada-h2 { font-size: var(--fs-h2); }
.ada-h3 { font-size: var(--fs-h3); }
.ada-h4 { font-size: var(--fs-h4); }

.ada-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-secondary);
}
.ada-small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}
.ada-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-secondary);
}
.ada-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0;
}

/* Numbered section index (01, 02 etc) — Responsum-style */
.ada-numeral {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}