/* ============================================================
   Anima Design System — Colors & Type
   ============================================================
   Reconstructed from public material (animaapp.com, blog,
   docs). Values are approximations; flag for refinement once
   the official Figma / codebase is attached.
   ============================================================ */

/* ---------- Fonts (self-hosted, variable) ---------- */
/* Space Grotesk — display, headings, brand */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-var.woff2') format('woff2-variations'),
       url('fonts/space-grotesk-var.woff2') format('woff2');
}

/* Inter — body, UI */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-var.woff2') format('woff2-variations'),
       url('fonts/inter-var.woff2') format('woff2');
}

/* JetBrains Mono — code, terminal, numerals */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono-var.woff2') format('woff2-variations'),
       url('fonts/jetbrains-mono-var.woff2') format('woff2');
}

:root {
  /* ============================================================
     COLORS
     ============================================================ */

  /* — Brand —
     Anima's signature pair: warm yellow + hot coral on
     ink black + cream. */
  --anima-yellow:        #FFE34D;
  --anima-yellow-soft:   #FFF1A0;
  --anima-yellow-hover:  #F5D32E;

  --anima-coral:         #FF5C8A;
  --anima-coral-soft:    #FFD3DF;
  --anima-coral-hover:   #E8447A;

  /* Supporting accents */
  --anima-lavender:      #E8E0FF;
  --anima-mint:          #C8F2D4;
  --anima-mint-strong:   #2BB673;
  --anima-sky:           #BFE4FF;

  /* — Ink (foreground) —
     Slightly warm near-black through to soft mid-greys.
     Use these, not pure #000 / #888 / etc. */
  --ink-1:               #15110E;   /* primary text, logo, hard borders */
  --ink-2:               #2B2520;   /* secondary text */
  --ink-3:               #5C5550;   /* tertiary text, captions */
  --ink-4:               #8A847E;   /* placeholder, disabled label */
  --ink-5:               #BDB7B1;   /* subtle dividers */

  /* — Cream / Surface —
     Warm off-whites and cream tones that anchor the brand. */
  --cream-1:             #FBF7F0;   /* page background (warm) */
  --cream-2:             #F5EFE5;   /* alt section background */
  --cream-3:             #ECE4D6;   /* card hover, soft fill */
  --paper:               #FFFFFF;   /* card / modal surface */

  /* — Semantic — */
  --success:             #2BB673;
  --success-soft:        #DFF5E8;
  --warning:             #F2A93B;
  --warning-soft:        #FCEBD0;
  --danger:              #E5484D;
  --danger-soft:         #FBE0E1;
  --info:                #3B82F6;
  --info-soft:           #DEEBFF;

  /* — Foreground / Background tokens (semantic) — */
  --fg-1:                var(--ink-1);
  --fg-2:                var(--ink-2);
  --fg-3:                var(--ink-3);
  --fg-muted:            var(--ink-4);
  --fg-on-accent:        var(--ink-1);   /* yellow needs dark text */
  --fg-on-coral:         #FFFFFF;
  --fg-inverse:          var(--cream-1);

  --bg-page:             var(--cream-1);
  --bg-surface:          var(--paper);
  --bg-alt:              var(--cream-2);
  --bg-inverse:          var(--ink-1);

  --border-subtle:       rgba(21, 17, 14, 0.08);
  --border-default:      rgba(21, 17, 14, 0.16);
  --border-strong:       var(--ink-1);
  --border-focus:        var(--anima-coral);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display:        'Space Grotesk', 'General Sans', 'PP Neue Montreal', system-ui, sans-serif;
  --font-body:           'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:           'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Type scale (px) */
  --fs-display-xl:       7.5rem;   /* 120px — hero only */
  --fs-display-lg:       5rem;     /* 80px */
  --fs-display-md:       4rem;     /* 64px */
  --fs-display-sm:       3rem;     /* 48px */
  --fs-h1:               2.5rem;   /* 40px */
  --fs-h2:               2rem;     /* 32px */
  --fs-h3:               1.5rem;   /* 24px */
  --fs-h4:               1.25rem;  /* 20px */
  --fs-body-lg:          1.125rem; /* 18px */
  --fs-body:             1rem;     /* 16px */
  --fs-body-sm:          0.875rem; /* 14px */
  --fs-caption:          0.75rem;  /* 12px */

  /* Line heights */
  --lh-tight:            1.0;      /* hero display */
  --lh-display:          1.1;      /* big headlines */
  --lh-heading:          1.2;
  --lh-body:             1.55;
  --lh-loose:            1.7;

  /* Tracking */
  --tracking-tight:      -0.03em;  /* display */
  --tracking-snug:       -0.01em;  /* h1–h4 */
  --tracking-normal:     0;
  --tracking-wide:       0.04em;   /* eyebrows, caps */

  /* Weights */
  --fw-regular:          400;
  --fw-medium:           500;
  --fw-semibold:         600;
  --fw-bold:             700;

  /* ============================================================
     SPACING (4px base)
     ============================================================ */
  --space-0:             0;
  --space-1:             0.25rem;  /*  4px */
  --space-2:             0.5rem;   /*  8px */
  --space-3:             0.75rem;  /* 12px */
  --space-4:             1rem;     /* 16px */
  --space-5:             1.5rem;   /* 24px */
  --space-6:             2rem;     /* 32px */
  --space-7:             3rem;     /* 48px */
  --space-8:             4rem;     /* 64px */
  --space-9:             6rem;     /* 96px */
  --space-10:            8rem;     /*128px */

  /* ============================================================
     RADII
     ============================================================ */
  --radius-sm:           6px;
  --radius-md:           10px;
  --radius-lg:           16px;
  --radius-xl:           24px;
  --radius-pill:         9999px;

  /* ============================================================
     SHADOWS — two systems
     ============================================================ */

  /* Sticker (hard, offset, opaque) */
  --shadow-sticker-sm:   3px 3px 0 var(--ink-1);
  --shadow-sticker:      6px 6px 0 var(--ink-1);
  --shadow-sticker-lg:   10px 10px 0 var(--ink-1);
  --shadow-sticker-coral: 6px 6px 0 var(--anima-coral);
  --shadow-sticker-yellow: 6px 6px 0 var(--anima-yellow);

  /* Soft (restrained, floating UI) */
  --shadow-soft-1:       0 1px 2px rgba(21, 17, 14, 0.06);
  --shadow-soft-2:       0 2px 8px rgba(21, 17, 14, 0.08);
  --shadow-soft-3:       0 12px 32px rgba(21, 17, 14, 0.10);
  --shadow-soft-4:       0 24px 64px rgba(21, 17, 14, 0.14);

  /* Focus ring */
  --ring-focus:          0 0 0 3px rgba(255, 92, 138, 0.35);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out-anima:      cubic-bezier(0.2, 0, 0, 1);
  --ease-snappy:         cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:       120ms;
  --duration-base:       180ms;
  --duration-slow:       320ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html {
  font-size: 16px;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-snug);
  margin: 0;
  color: var(--fg-1);
  text-wrap: balance;
}

h1 { font-size: var(--fs-display-md); line-height: var(--lh-display); letter-spacing: var(--tracking-tight); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-h1);         line-height: var(--lh-display); letter-spacing: var(--tracking-tight); font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h2);         line-height: var(--lh-heading); }
h4 { font-size: var(--fs-h3);         line-height: var(--lh-heading); }
h5 { font-size: var(--fs-h4);         line-height: var(--lh-heading); }

p {
  margin: 0 0 var(--space-4) 0;
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}

a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-color: var(--anima-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-base) var(--ease-out-anima);
}
a:hover { text-decoration-color: var(--anima-coral); }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  padding: 0.1em 0.35em;
  background: var(--cream-3);
  border-radius: var(--radius-sm);
}
pre {
  padding: var(--space-5);
  background: var(--ink-1);
  color: var(--cream-1);
  border-radius: var(--radius-md);
  overflow: auto;
  line-height: 1.6;
}

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-default);
  margin: var(--space-7) 0;
}

::selection {
  background: var(--anima-yellow);
  color: var(--ink-1);
}