/* ShapR Design System — Colors & Type
 * Source of truth for tokens used across the ShapR brand.
 */

/* ─────────────  FONT FACES  ───────────── */
@font-face {
  font-family: "Cocon";
  src: url("fonts/Cocon-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cocon";
  src: url("fonts/Cocon-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Baloo Paaji 2 — used only for the euro glyph (€), which Cocon lacks. */
@font-face {
  font-family: "Baloo Paaji 2";
  src: url("fonts/BalooPaaji2-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Baloo Paaji 2";
  src: url("fonts/BalooPaaji2-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Baloo Paaji 2";
  src: url("fonts/BalooPaaji2-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Open Sans bold (700) is used for nav/labels in Figma. The uploaded file is Semibold (600);
   we alias it to 700 so existing specs still render. Flag to user: request a true Bold .ttf. */
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Semibold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── BRAND COLORS ─── */
  --shapr-navy:        #0B2B45;  /* primary, headers, dark backgrounds */
  --shapr-navy-deep:   #0C1726;  /* near-black deep navy, footers */
  --shapr-yellow:      #FABA00;  /* triangle accent, wave highlights */
  --shapr-yellow-warm: #F2BE22;  /* warmer yellow variant */
  --shapr-yellow-dark: #CF9A00;  /* yellow hover/press */
  --shapr-pink:        #D8256A;  /* primary CTA, buttons */
  --shapr-pink-dark:   #B61C57;  /* pink hover/press */
  --shapr-teal:        #185359;  /* secondary accent, timeline nodes */
  --shapr-light-blue:  #30A5BF;  /* dividers, success states */

  /* ─── NEUTRALS ─── */
  --shapr-white:       #FFFFFF;
  --shapr-off-white:   #F9F9F9;
  --shapr-light-gray:  #F5F5F5;
  --shapr-gray-400:    #C8CACC;
  --shapr-gray-500:    #616467;
  --shapr-gray-600:    #444F54;
  --shapr-gray-700:    #444444;
  --shapr-gray-800:    #333333;
  --shapr-black:       #010B0E;  /* never pure black — use deep navy/near-black */

  /* ─── SEMANTIC (light surface) ─── */
  --bg:          var(--shapr-white);
  --bg-subtle:   var(--shapr-light-gray);
  --bg-dark:     var(--shapr-navy);
  --bg-deep:     var(--shapr-navy-deep);

  --fg:          var(--shapr-navy);      /* default text on light */
  --fg-body:     var(--shapr-gray-800);  /* body copy on light */
  --fg-muted:    var(--shapr-gray-500);  /* captions, secondary */
  --fg-on-dark:  var(--shapr-white);

  --accent:           var(--shapr-yellow);
  --accent-secondary: var(--shapr-teal);
  --cta:              var(--shapr-pink);
  --cta-hover:        var(--shapr-pink-dark);

  --border:      rgba(11, 43, 69, 0.10);
  --shadow-card: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
  --shadow-lift: 0 8px 24px 0 rgba(11, 43, 69, 0.08);

  /* ─── TYPE ─── */
  --font-display: "Cocon", "Fraunces", "Georgia", serif;   /* headlines */
  --font-body:    "Open Sans", "Helvetica Neue", Arial, sans-serif;

  /* Letter spacing — Figma uses a consistent -0.011em tracking */
  --tracking-tight: -0.011em;

  /* Type scale (web, 1728px reference) */
  --fs-display: 80px;   /* Cocon hero display */
  --fs-h1:      54px;   /* CoconPro section title */
  --fs-h2:      30px;   /* Cocon card title */
  --fs-h3:      26px;   /* Open Sans Bold lead */
  --fs-h4:      20px;   /* Open Sans Bold section label */
  --fs-lead:    22px;
  --fs-body:    18px;
  --fs-sm:      16px;
  --fs-xs:      14px;

  --lh-tight:   1.02;
  --lh-snug:    1.2;
  --lh-body:    1.5;
  --lh-loose:   1.62;

  /* ─── 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;

  /* ─── RADII ─── */
  --radius-sm: 3px;
  --radius-md: 6px;        /* buttons, menu chips */
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;
}

/* ─────────────  SEMANTIC ELEMENTS  ───────────── */
body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: 1.32;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.5;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}
p { margin: 0 0 1em 0; }

.lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--fg-body);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.caption {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}

/* ─────────────  DISPLAY DECORATION  ─────────────
 * ShapR uses the yellow triangle as a recurring eyebrow marker.
 */
.triangle-marker::before {
  content: "";
  display: inline-block;
  width: 18px; height: 18px;
  margin-right: 8px;
  vertical-align: -2px;
  background: url("assets/accent_triangle.svg") center / contain no-repeat;
}