/* ============================================================
   femtoAI — Colors & Type
   Source: femtoai_brandingguidelines_2025.pdf (Aug 2025)
   Brand: Indigo + Midnight Violet, with neutral + accent palette
   Typeface: DM Sans (Google Fonts), Arial as system fallback
   ============================================================ */

/* DM Sans via Google Fonts (Variable) -------------------------- */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap");

:root {
  /* ---------- PRIMARY PALETTE ---------- */
  --color-indigo:           #501AC6;   /* Primary brand */
  --color-midnight-violet:  #1F0C51;   /* Deep brand */

  /* ---------- NEUTRALS ---------- */
  --color-white:            #ffffff;
  --color-aura:             #f2f2f2;   /* Pantone 663 C */
  --color-lilac:            #E8DAFF;   /* Pantone 7743 C */
  --color-purple:           #A989F7;   /* Pantone 2645 C */
  --color-violet:           #7842EE;   /* Pantone 2725 C */
  --color-iris:             #7842EE;   /* Same family — kept for naming */
  --color-blackberry:       #270E65;

  /* ---------- ACCENTS ---------- */
  --color-spark:            #f9803d;   /* Orange — bold highlight */
  --color-pulse:            #6de5be;   /* Mint */
  --color-flow:             #30D1FF;   /* Cyan */
  --color-blue:             #1281FF;   /* Bright blue */

  /* ---------- GRADIENTS ---------- */
  --gradient-halo:          linear-gradient(135deg, #501AC6 0%, #ffffff 100%);
  --gradient-ultraviolet:   linear-gradient(135deg, #1F0C51 0%, #501AC6 100%);
  --gradient-aurora:        linear-gradient(135deg, #1F0C51 0%, #501AC6 55%, #7842EE 100%);

  /* ============================================================
     SEMANTIC TOKENS — light surface (default)
     ============================================================ */
  --bg:                     var(--color-white);
  --bg-subtle:              var(--color-aura);
  --bg-tint:                var(--color-lilac);
  --bg-inverse:             var(--color-midnight-violet);
  --bg-brand:               var(--color-indigo);

  --fg:                     var(--color-midnight-violet);
  --fg-muted:               #5a4f7a;
  --fg-subtle:              #8a82a3;
  --fg-on-brand:            var(--color-white);
  --fg-link:                var(--color-indigo);
  --fg-link-hover:          var(--color-violet);
  --fg-accent:              var(--color-spark);

  --border:                 #E5E0F2;
  --border-strong:          #C8BEE5;
  --border-brand:           var(--color-indigo);

  --focus-ring:             0 0 0 3px rgba(80, 26, 198, 0.35);
  --shadow-sm:              0 1px 2px rgba(31,12,81,0.06), 0 1px 1px rgba(31,12,81,0.04);
  --shadow-md:              0 4px 12px rgba(31,12,81,0.08), 0 2px 4px rgba(31,12,81,0.04);
  --shadow-lg:              0 16px 40px rgba(31,12,81,0.12), 0 4px 12px rgba(31,12,81,0.06);
  --shadow-glow:            0 8px 32px rgba(80,26,198,0.28);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans:              "DM Sans", Arial, system-ui, sans-serif;
  --font-mono:              "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Weights — DM Sans Medium for titles, Regular for body, Bold for links/buttons */
  --weight-regular:         400;
  --weight-medium:          500;
  --weight-semibold:        600;
  --weight-bold:            700;

  /* Type scale (rem-based, 1rem = 16px) */
  --text-xs:                0.75rem;   /* 12 */
  --text-sm:                0.875rem;  /* 14 */
  --text-base:              1rem;      /* 16 */
  --text-md:                1.125rem;  /* 18 */
  --text-lg:                1.25rem;   /* 20 */
  --text-xl:                1.5rem;    /* 24 */
  --text-2xl:               2rem;      /* 32 */
  --text-3xl:               2.5rem;    /* 40 */
  --text-4xl:               3.25rem;   /* 52 */
  --text-5xl:               4.25rem;   /* 68 */
  --text-6xl:               5.5rem;    /* 88 */

  --leading-tight:          1.05;
  --leading-snug:           1.2;
  --leading-normal:         1.45;
  --leading-relaxed:        1.6;

  --tracking-tight:         -0.02em;
  --tracking-normal:        0;
  --tracking-wide:          0.04em;
  --tracking-wider:         0.12em;     /* For eyebrow / all-caps labels */

  /* ============================================================
     SPACING — 4px base, doubling scale aligned to the 2× grid
     described in the brand guidelines ("Grid: 2× system")
     ============================================================ */
  --space-0:                0;
  --space-1:                0.25rem;   /* 4  */
  --space-2:                0.5rem;    /* 8  */
  --space-3:                0.75rem;   /* 12 */
  --space-4:                1rem;      /* 16 */
  --space-5:                1.5rem;    /* 24 */
  --space-6:                2rem;      /* 32 */
  --space-7:                3rem;      /* 48 */
  --space-8:                4rem;      /* 64 */
  --space-9:                6rem;      /* 96 */
  --space-10:               8rem;      /* 128 */

  /* ============================================================
     RADII — modest, modern. Logo wordmark has sharp terminals;
     UI uses soft rounding. Pill shapes used for CTAs in collateral.
     ============================================================ */
  --radius-sm:              4px;
  --radius-md:              8px;
  --radius-lg:              14px;
  --radius-xl:              22px;
  --radius-2xl:             32px;
  --radius-pill:            999px;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:               cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:            cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:          120ms;
  --duration-base:          200ms;
  --duration-slow:          360ms;
}

/* ============================================================
   DARK / "MIDNIGHT" SURFACE OVERRIDES
   Used when bg is Indigo or Midnight Violet (per Guidelines §15).
   Apply via [data-theme="midnight"] or .surface-midnight class.
   ============================================================ */
[data-theme="midnight"],
.surface-midnight {
  --bg:                     var(--color-midnight-violet);
  --bg-subtle:              var(--color-blackberry);
  --bg-tint:                var(--color-indigo);
  --bg-inverse:             var(--color-white);
  --bg-brand:               var(--color-indigo);

  --fg:                     var(--color-white);
  --fg-muted:               #C8BEE5;
  --fg-subtle:              #8a82a3;
  --fg-on-brand:            var(--color-white);
  --fg-link:                var(--color-lilac);
  --fg-link-hover:          var(--color-white);

  --border:                 rgba(255,255,255,0.12);
  --border-strong:          rgba(255,255,255,0.24);
}

[data-theme="indigo"],
.surface-indigo {
  --bg:                     var(--color-indigo);
  --bg-subtle:              #6433D2;
  --bg-tint:                var(--color-violet);
  --bg-inverse:             var(--color-white);

  --fg:                     var(--color-white);
  --fg-muted:               var(--color-lilac);
  --fg-subtle:              #C8BEE5;
  --fg-link:                var(--color-lilac);
  --fg-link-hover:          var(--color-white);

  --border:                 rgba(255,255,255,0.16);
  --border-strong:          rgba(255,255,255,0.32);
}

/* ============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   Maps to PDF §14 Hierarchy:
   "DM Sans Medium for titles, Regular for body,
    Medium/Bold for links/annotations"
   ============================================================ */
body, html {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);     /* DM Sans Medium */
  font-size: clamp(3rem, 6vw + 1rem, var(--text-6xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-4xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.h2 {
  font-weight: var(--weight-medium);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.h3 {
  font-weight: var(--weight-medium);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
}

.h4 {
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

.eyebrow {
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.body, p {
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.body-lg {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.body-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.caption {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--fg-subtle);
}

.link {
  color: var(--fg-link);
  font-weight: var(--weight-bold);       /* Annotations / links = DM Sans Bold or Medium */
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.link:hover {
  color: var(--fg-link-hover);
  border-bottom-color: currentColor;
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}