/* ============================================================
   AURORA DESIGN SYSTEM — colors_and_type.css
   "O amanhecer da nova educação"
   ============================================================ */

/* ---- Webfonts ---- */
/* Sora + Manrope are loaded locally from the uploaded variable .ttf files.
   Sawarabi Mincho is still pulled from Google Fonts (no file uploaded). */
@font-face {
  font-family: "Sora";
  src: url("fonts/Sora-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Sora-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Manrope-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap");

:root {
  /* ============================================================
     COLOR — primary
     Inspired by the moment night becomes day.
     Navy is the deep pre-dawn sky, the foundation of the brand.
     ============================================================ */
  --aurora-navy-950: #060B1F;   /* deep night */
  --aurora-navy-900: #0B1530;   /* primary navy */
  --aurora-navy-800: #14213D;
  --aurora-navy-700: #1E2F55;
  --aurora-navy-600: #2A3F6D;
  --aurora-navy-500: #3B528A;
  --aurora-navy-400: #6B7BA6;
  --aurora-navy-300: #9CA7C2;
  --aurora-navy-200: #C9CFDD;
  --aurora-navy-100: #E5E8EF;
  --aurora-navy-50:  #F2F4F8;

  /* COLOR — blue (the moment before sunrise) */
  --aurora-blue-900: #0E3A8A;
  --aurora-blue-700: #1E5BC6;
  --aurora-blue-500: #3D7BFF;   /* core blue */
  --aurora-blue-400: #6B9BFF;
  --aurora-blue-300: #9DBCFF;
  --aurora-blue-100: #DCE7FF;
  --aurora-blue-50:  #EEF3FF;

  /* COLOR — coral (the first warm light) */
  --aurora-coral-900: #7A1E2C;
  --aurora-coral-700: #C13A52;
  --aurora-coral-500: #FF6478;   /* core coral */
  --aurora-coral-400: #FF8A98;
  --aurora-coral-300: #FFB1BB;
  --aurora-coral-100: #FFD9DE;
  --aurora-coral-50:  #FFEEF1;

  /* COLOR — orange (the sun breaking horizon) */
  --aurora-orange-900: #7A3508;
  --aurora-orange-700: #C25E14;
  --aurora-orange-500: #FF8A3D;  /* core orange */
  --aurora-orange-400: #FFA56B;
  --aurora-orange-300: #FFC097;
  --aurora-orange-100: #FFE2CD;
  --aurora-orange-50:  #FFF2E6;

  /* COLOR — gold (warm accent for premium touches) */
  --aurora-gold-500: #E8B962;
  --aurora-gold-300: #F5D89A;
  --aurora-gold-100: #FBEDCB;

  /* ============================================================
     COLOR — neutrals
     A warmer-than-pure white for elegance.
     ============================================================ */
  --aurora-bg-50:  #FAFAFB;   /* "branco gelo" — page background */
  --aurora-bg-100: #F4F5F7;
  --aurora-bg-200: #E9EBF0;

  --aurora-ink-900: #0B1530;  /* same as navy-900, primary text */
  --aurora-ink-700: #2A3142;
  --aurora-ink-500: #5A6177;
  --aurora-ink-400: #8A91A6;
  --aurora-ink-300: #B3B9C9;

  /* ============================================================
     COLOR — semantic
     ============================================================ */
  --color-bg:          var(--aurora-bg-50);
  --color-bg-elevated: #FFFFFF;
  --color-bg-muted:    var(--aurora-bg-100);
  --color-bg-inverse:  var(--aurora-navy-900);

  --color-fg:          var(--aurora-ink-900);
  --color-fg-muted:    var(--aurora-ink-500);
  --color-fg-subtle:   var(--aurora-ink-400);
  --color-fg-inverse:  #FFFFFF;
  --color-fg-on-accent:#FFFFFF;

  --color-border:      rgba(11, 21, 48, 0.08);
  --color-border-strong: rgba(11, 21, 48, 0.16);
  --color-divider:     rgba(11, 21, 48, 0.06);

  --color-accent:           var(--aurora-coral-500);
  --color-accent-hover:     var(--aurora-coral-700);
  --color-accent-soft:      var(--aurora-coral-50);

  --color-primary:          var(--aurora-navy-900);
  --color-primary-hover:    var(--aurora-navy-800);

  --color-success: #2BA46A;
  --color-warning: var(--aurora-orange-500);
  --color-danger:  #D8425A;
  --color-info:    var(--aurora-blue-500);

  /* ============================================================
     GRADIENT — Aurora
     The signature dawn gradient. Use sparingly for brand moments.
     ============================================================ */
  --gradient-aurora:
    linear-gradient(135deg,
      #0B1530 0%,
      #1E2F55 22%,
      #3D7BFF 48%,
      #FF6478 78%,
      #FF8A3D 100%);

  --gradient-aurora-soft:
    linear-gradient(135deg,
      #DCE7FF 0%,
      #FFD9DE 55%,
      #FFE2CD 100%);

  --gradient-dawn-vertical:
    linear-gradient(180deg,
      #0B1530 0%,
      #1E2F55 35%,
      #3D7BFF 65%,
      #FF8A3D 100%);

  --gradient-coral-orange:
    linear-gradient(135deg, #FF6478 0%, #FF8A3D 100%);

  /* ============================================================
     TYPOGRAPHY — families
     ============================================================ */
  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-accent:  "Sawarabi Mincho", "Source Serif Pro", Georgia, serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* TYPE — scale (1.250 major third) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;
  --fs-4xl:  48px;
  --fs-5xl:  60px;
  --fs-6xl:  76px;
  --fs-7xl:  96px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-normal:  0em;
  --ls-wide:    0.04em;
  --ls-wider:   0.12em;

  /* ============================================================
     SPACING & RADII
     ============================================================ */
  --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;

  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;   /* card default */
  --radius-lg:   24px;   /* hero card */
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS — soft, premium, never harsh
     ============================================================ */
  --shadow-xs:  0 1px 2px rgba(11, 21, 48, 0.04);
  --shadow-sm:  0 2px 8px rgba(11, 21, 48, 0.06);
  --shadow-md:  0 8px 24px rgba(11, 21, 48, 0.08);
  --shadow-lg:  0 16px 48px rgba(11, 21, 48, 0.10);
  --shadow-xl:  0 24px 72px rgba(11, 21, 48, 0.14);
  --shadow-glow-coral:  0 8px 32px rgba(255, 100, 120, 0.32);
  --shadow-glow-blue:   0 8px 32px rgba(61, 123, 255, 0.28);

  /* MOTION */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Use these classes / element selectors directly.
   ============================================================ */
html, body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 6vw, var(--fs-7xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-fg);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-fg);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--color-fg);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--color-fg);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--color-fg);
}

p, .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-fg);
  text-wrap: pretty;
}

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

.body-sm, small {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-fg-muted);
}

.lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-muted);
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-accent);
}

.tagline {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--color-fg);
  font-style: normal;
}

.quote {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--color-fg);
}

.label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-snug);
  color: var(--color-fg);
}

.caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}

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

/* ============================================================
   GRADIENT TEXT — signature usage
   ============================================================ */
.text-gradient-aurora {
  background: var(--gradient-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-gradient-warm {
  background: var(--gradient-coral-orange);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}