/* APICATION Design System — Colors & Type tokens
 * Extracted from brand assets (logo gradient + wordmark)
 * Navy #22396d · Sky #2cbdf9 · Mint #26d1b7 · Aqua #9efec8
 */

/* ---------- Web fonts ----------
 * Brand stack:
 *   Display / wordmark : Benz Grotesk (file pending — substituting Mulish)
 *   Body / UI          : Montserrat (local variable font — .ttf in fonts/)
 */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@700;800;900&display=swap');

:root {
  /* ============================================================
   * BRAND COLORS — sampled from icône dégradé.png
   * ============================================================ */
  --apt-navy-900:        #1a2c55;   /* deepest text / pressed */
  --apt-navy-800:        #22396d;   /* primary brand navy — wordmark, smile, body text */
  --apt-navy-700:        #2e4a8a;
  --apt-navy-600:        #3d5fa8;
  --apt-navy-500:        #5a7bbf;   /* muted secondary text */
  --apt-navy-400:        #8aa3d2;
  --apt-navy-300:        #b5c6e3;
  --apt-navy-200:        #d8e1f0;
  --apt-navy-100:        #eaf0f9;
  --apt-navy-50:         #f5f8fc;

  --apt-sky-700:         #0a8fc9;
  --apt-sky-600:         #169fdc;
  --apt-sky-500:         #2cbdf9;   /* mid-gradient cyan — interactive accent */
  --apt-sky-400:         #5fcefb;
  --apt-sky-300:         #9be0fc;
  --apt-sky-200:         #cdeefe;
  --apt-sky-100:         #e6f7ff;

  --apt-mint-700:        #0f9b86;
  --apt-mint-600:        #1acdb5;
  --apt-mint-500:        #26d1b7;   /* bottom of gradient — success, growth */
  --apt-mint-400:        #6fedc1;
  --apt-mint-300:        #8df8c5;   /* highlight aqua */
  --apt-mint-200:        #9efec8;   /* corner highlight */
  --apt-mint-100:        #d6fde7;

  /* Neutrals — warm-cool gray that pairs with navy */
  --apt-ink-900:         #0d1426;
  --apt-ink-800:         #1f2841;
  --apt-ink-700:         #3a4566;
  --apt-ink-600:         #5b6789;
  --apt-ink-500:         #8590ad;
  --apt-ink-400:         #aab3c8;
  --apt-ink-300:         #c8cfdd;
  --apt-ink-200:         #e4e8f0;
  --apt-ink-100:         #f1f3f8;
  --apt-ink-50:          #f8f9fc;
  --apt-white:           #ffffff;

  /* Semantic */
  --apt-success:         var(--apt-mint-600);
  --apt-info:            var(--apt-sky-500);
  --apt-warning:         #f5a524;
  --apt-danger:          #e5484d;

  /* ============================================================
   * SEMANTIC COLOR TOKENS
   * ============================================================ */
  --bg:                  var(--apt-white);
  --bg-subtle:           var(--apt-ink-50);
  --bg-muted:            var(--apt-ink-100);
  --bg-inverse:          var(--apt-navy-800);
  --bg-brand:            var(--apt-navy-800);

  --fg-1:                var(--apt-navy-800);   /* primary text */
  --fg-2:                var(--apt-ink-700);    /* secondary text */
  --fg-3:                var(--apt-ink-500);    /* tertiary / captions */
  --fg-disabled:         var(--apt-ink-400);
  --fg-on-brand:         var(--apt-white);
  --fg-on-accent:        var(--apt-navy-800);   /* navy on mint/cyan reads strong */
  --fg-link:             var(--apt-sky-700);

  --border-subtle:       var(--apt-ink-200);
  --border-default:      var(--apt-ink-300);
  --border-strong:       var(--apt-navy-800);
  --border-focus:        var(--apt-sky-500);

  --accent:              var(--apt-sky-500);
  --accent-hover:        var(--apt-sky-600);
  --accent-pressed:      var(--apt-sky-700);

  /* ============================================================
   * SIGNATURE GRADIENT — the soul of the brand
   * ============================================================ */
  --gradient-brand:        linear-gradient(135deg, #2cbdf9 0%, #26d1b7 55%, #9efec8 100%);
  --gradient-brand-soft:   linear-gradient(135deg, #cdeefe 0%, #d6fde7 100%);
  --gradient-brand-vivid:  linear-gradient(160deg, #169fdc 0%, #2cbdf9 35%, #26d1b7 75%, #8df8c5 100%);
  --gradient-navy:         linear-gradient(160deg, #22396d 0%, #1a2c55 100%);
  --gradient-navy-glow:    radial-gradient(120% 90% at 30% 0%, #2e4a8a 0%, #22396d 45%, #1a2c55 100%);

  /* ============================================================
   * TYPOGRAPHY — base
   * ============================================================ */
  --font-display:        'Mulish', 'Benz Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:           'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:           ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* Scale — modular, tuned for marketing + app density */
  --text-xs:             12px;
  --text-sm:             14px;
  --text-base:           16px;
  --text-md:             18px;
  --text-lg:             20px;
  --text-xl:             24px;
  --text-2xl:            32px;
  --text-3xl:            40px;
  --text-4xl:            56px;
  --text-5xl:            72px;
  --text-6xl:            96px;

  --leading-tight:       1.1;
  --leading-snug:        1.25;
  --leading-normal:      1.5;
  --leading-relaxed:     1.7;

  --tracking-tight:      -0.025em;
  --tracking-snug:       -0.01em;
  --tracking-normal:     0;
  --tracking-wide:       0.04em;
  --tracking-caps:       0.08em;

  --weight-light:        300;
  --weight-regular:      400;
  --weight-medium:       500;
  --weight-semibold:     600;
  --weight-bold:         700;
  --weight-extrabold:    800;
  --weight-black:        900;

  /* ============================================================
   * SPACING — 4px base
   * ============================================================ */
  --space-0:             0;
  --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;
  --space-16:            64px;
  --space-20:            80px;
  --space-24:            96px;
  --space-32:            128px;

  /* ============================================================
   * RADII — friendly rounding to match the wordmark
   * ============================================================ */
  --radius-xs:           4px;
  --radius-sm:           8px;
  --radius-md:           12px;
  --radius-lg:           16px;
  --radius-xl:           24px;
  --radius-2xl:          32px;
  --radius-pill:         999px;
  --radius-squircle:     22%;        /* matches the icon container */

  /* ============================================================
   * SHADOWS — soft, navy-tinted
   * ============================================================ */
  --shadow-xs:           0 1px 2px rgba(34, 57, 109, 0.06);
  --shadow-sm:           0 2px 6px rgba(34, 57, 109, 0.08);
  --shadow-md:           0 8px 20px rgba(34, 57, 109, 0.10);
  --shadow-lg:           0 18px 40px rgba(34, 57, 109, 0.14);
  --shadow-xl:           0 32px 60px rgba(34, 57, 109, 0.18);
  --shadow-glow-sky:     0 12px 30px rgba(44, 189, 249, 0.30);
  --shadow-glow-mint:    0 12px 30px rgba(38, 209, 183, 0.28);
  --shadow-inset:        inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ============================================================
   * MOTION
   * ============================================================ */
  --ease-standard:       cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasized:     cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:            cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:       150ms;
  --duration-base:       240ms;
  --duration-slow:       420ms;
}

/* ============================================================
 * SEMANTIC TYPE — apply directly to elements
 * ============================================================ */
.apt-display-1, h1.apt {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: clamp(48px, 6vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.apt-display-2, h2.apt {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: clamp(36px, 4vw, var(--text-3xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.apt-h3, h3.apt {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

.apt-h4, h4.apt {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.apt-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--apt-sky-700);
}

.apt-lead, p.apt-lead {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.apt-body, p.apt {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.apt-small {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}

.apt-caption {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}

.apt-mono, code.apt {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--apt-navy-50);
  color: var(--apt-navy-800);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}

/* Gradient text utility — the brand's signature flourish */
.apt-text-gradient {
  background: var(--gradient-brand-vivid);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}