/* =====================================================================
   AEMA Digital Partner — Design Tokens
   Calm, professional, practical, sales-driven, trustworthy.
   ===================================================================== */

/* ---------- Webfont: General Sans (Fontshare) ---------- */
/* If self-hosting fonts, replace this @import with @font-face declarations
   pointing at fonts/ — the rest of this file does not need to change. */
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

:root {
  /* =================================================================
     COLOR
     ================================================================= */

  /* --- Ink (primary, deep navy / blue-gray) --- */
  --ink-50:  #F4F6F9;
  --ink-100: #E4E1D9;        /* hairline borders on light */
  --ink-200: #C8CFDA;
  --ink-300: #8A9CB3;
  --ink-400: #5E7390;
  --ink-500: #3F5878;        /* slate body text on bone */
  --ink-600: #2A4060;
  --ink-700: #1F3654;
  --ink-800: #14253B;
  --ink-900: #0B1626;        /* near-black navy, primary brand */
  --ink-950: #07111E;

  /* --- Amber (accent, warm orange) --- */
  --amber-50:  #FBF1E1;
  --amber-100: #F8E4C7;
  --amber-200: #F2CB94;
  --amber-300: #ECB066;
  --amber-400: #E5973F;
  --amber-500: #D9821F;       /* primary CTA */
  --amber-600: #BF6E15;
  --amber-700: #A35C10;
  --amber-800: #84490C;
  --amber-900: #623609;

  /* --- Bone (warm off-white) --- */
  --bone-50:  #FBF8F2;
  --bone-100: #F6F1E7;        /* primary alt background */
  --bone-200: #ECE5D5;
  --bone-300: #D9D2C2;        /* hairline on bone */
  --bone-400: #BCB4A2;

  /* --- Paper / black --- */
  --paper: #FFFFFF;
  --black: #07111E;

  /* --- Semantic --- */
  --success-500: #2E7D5B;
  --success-50:  #E6F1EB;
  --warning-500: #C77E1A;     /* same hue family as amber, warmer */
  --danger-500:  #B5361F;
  --danger-50:   #F5E2DD;

  /* =================================================================
     SEMANTIC COLOR ROLES (light mode default)
     ================================================================= */
  --bg:          var(--paper);
  --bg-alt:      var(--bone-100);
  --bg-elevated: var(--paper);
  --bg-inverse:  var(--ink-900);

  --fg:          var(--ink-900);    /* primary text */
  --fg-muted:    var(--ink-500);    /* secondary text */
  --fg-subtle:   var(--ink-400);
  --fg-inverse:  var(--bone-50);

  --border:        var(--ink-100);
  --border-strong: var(--ink-200);
  --border-bone:   var(--bone-300);

  --accent:        var(--amber-500);
  --accent-hover:  var(--amber-600);
  --accent-press:  var(--amber-700);
  --accent-soft:   var(--amber-50);
  --on-accent:     var(--paper);

  --focus-ring:  var(--amber-500);

  /* =================================================================
     TYPE
     ================================================================= */
  --font-sans: "General Sans", "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Sizes (rem; root = 16px) */
  --display-1: 4.5rem;     /* 72 */
  --display-2: 3.25rem;    /* 52 */
  --h1:        2.5rem;     /* 40 */
  --h2:        1.875rem;   /* 30 */
  --h3:        1.375rem;   /* 22 */
  --h4:        1.125rem;   /* 18 */
  --body-lg:   1.125rem;   /* 18 */
  --body:      1rem;       /* 16 */
  --small:     0.875rem;   /* 14 */
  --tiny:      0.75rem;    /* 12 */

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Line heights */
  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body:    1.55;
  --lh-tight:   1.3;

  /* Letter spacing */
  --track-display: -0.02em;
  --track-heading: -0.015em;
  --track-tight:   -0.01em;
  --track-normal:   0;
  --track-eyebrow:  0.12em;

  /* =================================================================
     SPACING — 8px base
     ================================================================= */
  --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;
  --space-11: 160px;

  /* =================================================================
     RADII
     ================================================================= */
  --radius-sm:  6px;
  --radius-md:  12px;   /* buttons, inputs, small cards */
  --radius-lg:  20px;   /* large cards, image frames */
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* =================================================================
     SHADOWS — soft, no color
     ================================================================= */
  --shadow-sm: 0 1px 2px rgb(11 22 38 / 0.04);
  --shadow-md: 0 6px 18px rgb(11 22 38 / 0.06), 0 1px 2px rgb(11 22 38 / 0.04);
  --shadow-lg: 0 24px 48px -12px rgb(11 22 38 / 0.10), 0 2px 6px rgb(11 22 38 / 0.05);
  --shadow-xl: 0 40px 80px -20px rgb(11 22 38 / 0.14), 0 4px 12px rgb(11 22 38 / 0.06);

  /* =================================================================
     LAYOUT
     ================================================================= */
  --container:        1200px;
  --container-narrow: 880px;
  --gutter-mobile:   24px;
  --gutter-tablet:   48px;
  --gutter-desktop:  80px;
  --header-height:   72px;

  /* =================================================================
     MOTION
     ================================================================= */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;
}

/* =====================================================================
   BASE RESETS / DEFAULTS
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--amber-100); color: var(--ink-900); }

/* =====================================================================
   SEMANTIC TYPOGRAPHY
   ===================================================================== */
.display-1, h1.display, .hero-h1 {
  font-family: var(--font-sans);
  font-size: var(--display-1);
  font-weight: var(--weight-medium);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

.display-2 {
  font-size: var(--display-2);
  font-weight: var(--weight-medium);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--h1);
  font-weight: var(--weight-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
  margin: 0;
  text-wrap: balance;
}

h2 {
  font-size: var(--h2);
  font-weight: var(--weight-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-tight);
  margin: 0;
  text-wrap: balance;
}

h3 {
  font-size: var(--h3);
  font-weight: var(--weight-semi);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  margin: 0;
}

h4 {
  font-size: var(--h4);
  font-weight: var(--weight-semi);
  line-height: var(--lh-tight);
  margin: 0;
}

p, .body { font-size: var(--body); line-height: var(--lh-body); margin: 0; text-wrap: pretty; }
.body-lg { font-size: var(--body-lg); line-height: 1.6; text-wrap: pretty; }
.small   { font-size: var(--small); line-height: 1.5; }
.tiny    { font-size: var(--tiny); }

.muted    { color: var(--fg-muted); }
.subtle   { color: var(--fg-subtle); }

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

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-in-out);
}
a:hover { border-bottom-color: currentColor; }

/* =====================================================================
   FOCUS
   ===================================================================== */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}