/* =========================================================
   ROOT TOKENS + UTILITIES
   ========================================================= */

/* -------------------------
   Transitions
   ------------------------- */
:root {
  --tr-fast: all 0.2s ease-in-out;
  --tr-medium: all 0.3s ease-in-out;
  --tr-slow: all 0.5s ease-in-out;
}

/* -------------------------
   Background Colors
   ------------------------- */
:root {
  --b1: #080808;
  --b2: #111111;
  --b3: #1a1a1a;
  --b4: #222222;
  --b5: #2b2b2b;
  --b6: #333333;
  --b7: #3d3d3d;
  --b8: #474747;
  --b9: #515151;
  --b10: #5c5c5c;
}
.bg-b1  { background-color: var(--b1); }
.bg-b2  { background-color: var(--b2); }
.bg-b3  { background-color: var(--b3); }
.bg-b4  { background-color: var(--b4); }
.bg-b5  { background-color: var(--b5); }
.bg-b6  { background-color: var(--b6); }
.bg-b7  { background-color: var(--b7); }
.bg-b8  { background-color: var(--b8); }
.bg-b9  { background-color: var(--b9); }
.bg-b10 { background-color: var(--b10); }

/* -------------------------
   Text Colors
   ------------------------- */
:root {
  --t1: #ffffff;
  --t2: #f5f5f5;
  --t3: #ebebeb;
  --t4: #e0e0e0;
  --t5: #d6d6d6;
  --t6: #cccccc;
  --t7: #bfbfbf;
  --t8: #b3b3b3;
  --t9: #a6a6a6;
  --t10: #999999;
}
.text-t1  { color: var(--t1); }
.text-t2  { color: var(--t2); }
.text-t3  { color: var(--t3); }
.text-t4  { color: var(--t4); }
.text-t5  { color: var(--t5); }
.text-t6  { color: var(--t6); }
.text-t7  { color: var(--t7); }
.text-t8  { color: var(--t8); }
.text-t9  { color: var(--t9); }
.text-t10 { color: var(--t10); }

/* -------------------------
   Border Colors
   ------------------------- */
:root {
  --br1: #1a1a1a;
  --br2: #2e2e2e;
  --br3: #4a4a4a;
  --br4: #6e6e6e;
  --br5: #9b9b9b;
  --br6: #d1d1d1;
}
  .br1 {border: 1px solid var(--br1)}
  .br2 {border: 1px solid var(--br2)}
  .br3 {border: 1px solid var(--br3)}
  .br4 {border: 1px solid var(--br4)}
  .br5 {border: 1px solid var(--br5)}
  .br6 {border: 1px solid var(--br6)}

/* -------------------------
   Accent Colors
   ------------------------- */
:root {
  --accent1: #1e90ff;
  --accent2: #FFD700; /* Premium yellow */
    /* Red */
  --red-L: #fff0f0;   /* Light Red */
  --red-D: #ff5252;   /* Darker / Primary Red */

  /* Green */
  --green-L: #f0fff4; /* Light Green */
  --green-D: #00a86b; /* Darker / Primary Green */

  /* Black */
  --black-T: #080808; /* True Black */
}
.accent1 { color: var(--accent1); }
.accent2 { color: var(--accent2); }



/* -------------------------
   Font Sizes
   ------------------------- */
:root {
  --fs-1: 0.75rem;   /* 12px */
  --fs-2: 0.875rem;  /* 14px */
  --fs-3: 1rem;      /* 16px */
  --fs-4: 1.125rem;  /* 18px */
  --fs-5: 1.25rem;   /* 20px */
  --fs-6: 1.5rem;    /* 24px */
  --fs-7: 1.75rem;   /* 28px */
  --fs-8: 2rem;      /* 32px */
  --fs-9: 2.5rem;    /* 40px */
  --fs-10: 3rem;     /* 48px */
  --fs-11: 4rem;     /* 64px */
}
.fs-1  { font-size: var(--fs-1); }
.fs-2  { font-size: var(--fs-2); }
.fs-3  { font-size: var(--fs-3); }
.fs-4  { font-size: var(--fs-4); }
.fs-5  { font-size: var(--fs-5); }
.fs-6  { font-size: var(--fs-6); }
.fs-7  { font-size: var(--fs-7); }
.fs-8  { font-size: var(--fs-8); }
.fs-9  { font-size: var(--fs-9); }
.fs-10 { font-size: var(--fs-10); }
.fs-11 { font-size: var(--fs-11); }

/* -------------------------
   Line Heights
   ------------------------- */
:root {
  --lh16: 16px;
  --lh20: 20px;
  --lh24: 24px;
  --lh28: 28px;
  --lh32: 32px;
  --lh36: 36px;
  --lh40: 40px;
}
.lh16 { line-height: var(--lh16); }
.lh20 { line-height: var(--lh20); }
.lh24 { line-height: var(--lh24); }
.lh28 { line-height: var(--lh28); }
.lh32 { line-height: var(--lh32); }
.lh36 { line-height: var(--lh36); }
.lh40 { line-height: var(--lh40); }

/* -------------------------
   Font Family & Weights
   ------------------------- */
:root {
  --font-base: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;

  --f400: 400;
  --f500: 500;
  --f600: 600;
  --f700: 700;
}
.font-base { font-family: var(--font-base); }
.f400      { font-weight: var(--f400); }
.f500      { font-weight: var(--f500); }
.f600      { font-weight: var(--f600); }
.f700      { font-weight: var(--f700); }

/* -------------------------
   Spacing Tokens
   ------------------------- */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 3rem;     /* 48px */
  --sp-10: 3.75rem; /* 60px */
  --sp-11: 4.5rem;  /* 72px */
  --sp-12: 5.25rem; /* 84px */
  --sp-13: 6rem;    /* 96px */
  --sp-14: 6.75rem; /* 108px */
  --sp-15: 7.5rem;  /* 120px */
  --sp-16: 8rem;    /* 128px */
}

/* =========================================================
   BASE STYLES
   ========================================================= */
body {
  margin: 0;
  padding: 0;
  background: var(--b1);
  color: var(--t1);
  font-family: var(--font-base);
}

h1 {
  color: var(--t2);
  font-weight: var(--f700);
}

p {
  color: var(--t5);
  font-weight: var(--f400);
}

/* =========================================================
   CTA BUTTONS (Global / Reusable)
   ========================================================= */

/* Primary Button */
.btn-primary-custom {
  background: var(--t1);
  color: var(--b1);
  border-radius: 8px;
  padding: var(--sp-3) var(--sp-5);
  font-weight: var(--f700);
  border: none;
  cursor: pointer;
  transition: var(--tr-medium);
  text-decoration: none; /* Prevent underline */
  display: inline-block; /* ensures padding works well on <a> */
}

.btn-primary-custom:hover {
  background: var(--t3);
  color: var(--b1);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Secondary Button */
.btn-secondary-custom {
  background: transparent;
  color: var(--t1);
  border: 2px solid var(--t1);
  border-radius: 8px;
  padding: var(--sp-3) var(--sp-5);
  font-weight: var(--f700);
  cursor: pointer;
  transition: var(--tr-medium);
  text-decoration: none; /* remove underline for <a> */
  display: inline-block; /* ensures padding applies correctly on <a> */
}
.btn-secondary-custom:hover {
  background: var(--t1);
  color: var(--b1);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* CTA Wrapper */
.cta {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
  justify-content: flex-start;
}
@media (max-width: 576px) {
  .cta {
    justify-content: center;
  }
}


/**

.frame{}
svg{width:300px; height:auto;display:block}



@media (max-width: 768px) {
  svg{width:200px}
}**/