/* =============================================================
   Amiron Design System — Colors & Type
   Source: Amiron Brand Snapshot V3 (March 2023)
   ============================================================= */

/* -- Fonts -------------------------------------------------------
   Body: Proxima Nova (provided as .otf/.ttf in /fonts)
   Display: Sora (Google Fonts — see <link> in HTML)
*/
@font-face {
  font-family: "Proxima Nova";
  src: url("./fonts/proximanova_light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("./fonts/proximanova_regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("./fonts/proximanova_bold.otf") format("opentype");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("./fonts/proximanova_boldit.otf") format("opentype");
  font-weight: 600 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("./fonts/proximanova_extrabold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("./fonts/proximanova_black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proxima Nova";
  src: url("./fonts/proximanova_blackit.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ============== BRAND PALETTE ==============
     Primary lead colours: Amiron Blue + Amiron Plum
     Hero motif: Amiron Gradient (Plum → Blue)
     Neutrals: Black, Grey, White (off-white)
     Secondary (use sparingly): Fuschia, Gold, Seafoam, Sky
  */

  /* -- Primary brand colours ---------------------------------- */
  --color-amiron-blue:      #513AFF;   /* RGB lead */
  --color-amiron-plum:      #6D39B7;   /* CMYK lead / deep accent */
  --color-amiron-sky:       #359EF6;   /* light blue accent */
  --color-amiron-seafoam:   #23DBF2;   /* gradient end / cyan pop */

  /* -- Secondary / accent (sparingly) ------------------------- */
  --color-amiron-fuschia:   #F769C8;
  --color-amiron-gold:      #F8BE30;

  /* -- Neutrals ------------------------------------------------ */
  --color-amiron-black:     #040404;
  --color-amiron-grey:      #E7E7E7;
  --color-amiron-white:     #FFFDF7;   /* slightly warm off-white */

  /* -- Extended neutral scale (system extension) -------------- */
  --color-grey-50:   #FAFAFA;
  --color-grey-100:  #F2F2F2;
  --color-grey-200:  #E7E7E7;
  --color-grey-300:  #D1D1D1;
  --color-grey-400:  #A8A8A8;
  --color-grey-500:  #767676;
  --color-grey-600:  #4D4D4D;
  --color-grey-700:  #2B2B2B;
  --color-grey-800:  #161616;
  --color-grey-900:  #040404;

  /* -- Brand gradient (the hero visual motif) ------------------
     Snapshot defines Amiron Gradient Plum → Blue. The secondary
     "halo" gradient (Blue → Seafoam) is observed in the logo and
     marketing artwork. */
  --gradient-amiron:        linear-gradient(135deg, #6D39B7 0%, #513AFF 60%, #23DBF2 100%);
  --gradient-amiron-tight:  linear-gradient(135deg, #6D39B7 0%, #513AFF 100%);
  --gradient-amiron-cool:   linear-gradient(135deg, #513AFF 0%, #23DBF2 100%);
  --gradient-amiron-soft:   linear-gradient(180deg, rgba(81,58,255,0.06) 0%, rgba(35,219,242,0) 100%);

  /* ============== SEMANTIC TOKENS ============== */
  /* Surfaces */
  --bg-app:        var(--color-amiron-white);
  --bg-elevated:   #FFFFFF;
  --bg-muted:      var(--color-grey-50);
  --bg-inverse:    var(--color-amiron-black);
  --bg-tint:       rgba(81, 58, 255, 0.04);

  /* Foregrounds */
  --fg-1:          var(--color-amiron-black);   /* primary text */
  --fg-2:          var(--color-grey-600);       /* secondary text */
  --fg-3:          var(--color-grey-500);       /* tertiary / meta */
  --fg-4:          var(--color-grey-400);       /* placeholder / disabled */
  --fg-on-brand:   var(--color-amiron-white);
  --fg-on-dark:    var(--color-amiron-white);
  --fg-link:       var(--color-amiron-blue);

  /* Borders */
  --border-1:      var(--color-grey-200);
  --border-2:      var(--color-grey-300);
  --border-strong: var(--color-grey-700);
  --border-brand:  var(--color-amiron-blue);

  /* Status */
  --status-success: #1FA971;
  --status-warning: var(--color-amiron-gold);
  --status-danger:  #E5484D;
  --status-info:    var(--color-amiron-sky);

  /* ============== TYPOGRAPHY ============== */
  --font-display:  "Sora", "Proxima Nova", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:     "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (rem-based, 16px root) */
  --fs-xs:    0.75rem;   /* 12 */
  --fs-sm:    0.875rem;  /* 14 */
  --fs-base:  1rem;      /* 16 */
  --fs-md:    1.125rem;  /* 18 */
  --fs-lg:    1.25rem;   /* 20 */
  --fs-xl:    1.5rem;    /* 24 */
  --fs-2xl:   2rem;      /* 32 */
  --fs-3xl:   2.5rem;    /* 40 */
  --fs-4xl:   3.25rem;   /* 52 */
  --fs-5xl:   4.5rem;    /* 72 */
  --fs-6xl:   6rem;      /* 96 */

  /* Line-heights */
  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  /* Tracking */
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.14em;

  /* ============== SPACING ============== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ============== RADII ============== */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ============== SHADOWS / ELEVATION ============== */
  --shadow-xs:    0 1px 2px rgba(4, 4, 4, 0.04);
  --shadow-sm:    0 1px 2px rgba(4, 4, 4, 0.04), 0 2px 6px rgba(4, 4, 4, 0.04);
  --shadow-md:    0 2px 4px rgba(4, 4, 4, 0.04), 0 8px 24px rgba(4, 4, 4, 0.06);
  --shadow-lg:    0 4px 8px rgba(4, 4, 4, 0.05), 0 24px 48px rgba(4, 4, 4, 0.08);
  --shadow-xl:    0 8px 16px rgba(4, 4, 4, 0.06), 0 40px 80px rgba(4, 4, 4, 0.10);
  --shadow-brand: 0 8px 24px rgba(81, 58, 255, 0.18), 0 2px 6px rgba(81, 58, 255, 0.10);
  --shadow-inset: inset 0 0 0 1px rgba(4, 4, 4, 0.06);
  --ring-focus:   0 0 0 3px rgba(81, 58, 255, 0.25);

  /* ============== MOTION ============== */
  --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.05);
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --dur-xslow:  520ms;

  /* ============== LAYOUT ============== */
  --container-narrow:  720px;
  --container-default: 1120px;
  --container-wide:    1280px;
  --container-bleed:   1440px;
}

/* ============== SEMANTIC ELEMENT STYLES ============== */
html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-app); }
body { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg-1); -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; color: var(--fg-1); margin: 0; letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); text-wrap: balance; }
h1 { font-size: var(--fs-5xl); line-height: var(--lh-tight); letter-spacing: -0.025em; font-weight: 700; }
h2 { font-size: var(--fs-3xl); letter-spacing: var(--tracking-tight); font-weight: 700; }
h3 { font-size: var(--fs-2xl); letter-spacing: var(--tracking-snug); font-weight: 600; }
h4 { font-size: var(--fs-xl); font-weight: 600; }
h5 { font-size: var(--fs-lg); font-weight: 600; }
h6 { font-size: var(--fs-md); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--fg-2); }

p  { margin: 0; line-height: var(--lh-relaxed); color: var(--fg-1); text-wrap: pretty; }
.lead { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--fg-2); }
small, .meta { font-size: var(--fs-sm); color: var(--fg-3); }
.eyebrow { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--color-amiron-blue); }

a { color: var(--fg-link); text-decoration: none; transition: opacity var(--dur-fast) var(--ease-standard); }
a:hover { opacity: 0.7; }

code, pre { font-family: var(--font-mono); font-size: 0.92em; }
code { background: var(--color-grey-100); border-radius: var(--radius-xs); padding: 0.1em 0.35em; }

::selection { background: rgba(81, 58, 255, 0.20); color: var(--color-amiron-black); }

/* Brand gradient text utility */
.gradient-text {
  background: var(--gradient-amiron);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}