:root {
  /* =========================================================
     Core brand palette
  ========================================================= */

  /*
   * Sharp premium blue
   * Used for links, active states, supporting buttons,
   * interface accents, graphics and selected controls.
   */
  --bs-blue: #0057ff;
  --bs-indigo: #1649c9;
  --bs-purple: #4d5eae;
  --bs-pink: #c25286;
  --bs-red: #cf3f4b;

  /*
   * Vivid orange
   * Used for primary CTAs, important icons, highlights,
   * carousel indicators and conversion-focused elements.
   */
  --action-color: #ff6a00;
  --action-color-dark: #d94f00;

  /*
   * Secondary brand accent
   */
  --accent-color: #0057ff;

  --bs-yellow: #ffae24;
  --bs-green: #16825d;
  --bs-white: #ffffff;

  /* =========================================================
     Neutral colors
  ========================================================= */

  --bs-gray: #64717d;
  --bs-gray-dark: #223247;

  --surface-color: #f8faff;
  --surface-blue: #edf3ff;
  --border-color: #d3deed;

  /*
   * Deep navy stabilizes the sharper blue and prevents
   * the page from feeling overly bright or playful.
   */
  --primary-deep: #061f42;
  --surface-dark: #03152e;
  --form-border-color: #c5d2e2;

  --error-color: #c93643;
  --color-transparent: rgba(0, 0, 0, 0);

  /* =========================================================
     Neutral transparency
  ========================================================= */

  --black-alpha-22: rgba(0, 0, 0, 0.22);
  --black-alpha-25: rgba(0, 0, 0, 0.25);

  --white-alpha-018: rgba(255, 255, 255, 0.018);
  --white-alpha-025: rgba(255, 255, 255, 0.025);
  --white-alpha-035: rgba(255, 255, 255, 0.035);
  --white-alpha-055: rgba(255, 255, 255, 0.055);
  --white-alpha-06: rgba(255, 255, 255, 0.06);
  --white-alpha-12: rgba(255, 255, 255, 0.12);
  --white-alpha-35: rgba(255, 255, 255, 0.35);
  --white-alpha-45: rgba(255, 255, 255, 0.45);
  --white-alpha-50: rgba(255, 255, 255, 0.5);
  --white-alpha-55: rgba(255, 255, 255, 0.55);
  --white-alpha-65: rgba(255, 255, 255, 0.65);
  --white-alpha-68: rgba(255, 255, 255, 0.68);
  --white-alpha-70: rgba(255, 255, 255, 0.7);
  --white-alpha-78: rgba(255, 255, 255, 0.78);
  --white-alpha-80: rgba(255, 255, 255, 0.8);
  --white-alpha-86: rgba(255, 255, 255, 0.86);
  --white-alpha-88: rgba(255, 255, 255, 0.88);

  /* =========================================================
     Deep navy transparency
     Based on primary-deep: #061f42
  ========================================================= */

  --primary-alpha-055: rgba(6, 31, 66, 0.055);
  --primary-alpha-14: rgba(6, 31, 66, 0.14);
  --primary-alpha-16: rgba(6, 31, 66, 0.16);
  --primary-alpha-18: rgba(6, 31, 66, 0.18);
  --primary-alpha-20: rgba(6, 31, 66, 0.2);
  --primary-alpha-22: rgba(6, 31, 66, 0.22);
  --primary-alpha-35: rgba(6, 31, 66, 0.35);

  /* =========================================================
     Orange transparency
     Based on action-color: #ff6a00
  ========================================================= */

  --action-alpha-08: rgba(255, 106, 0, 0.08);
  --action-alpha-13: rgba(255, 106, 0, 0.13);
  --action-alpha-18: rgba(255, 106, 0, 0.18);
  --action-alpha-24: rgba(255, 106, 0, 0.24);
  --action-alpha-30: rgba(255, 106, 0, 0.3);
  --action-alpha-40: rgba(255, 106, 0, 0.4);

  /* =========================================================
     Sharp blue transparency
     Based on accent-color: #0057ff
  ========================================================= */

  --accent-alpha-06: rgba(0, 87, 255, 0.06);
  --accent-alpha-10: rgba(0, 87, 255, 0.1);
  --accent-alpha-13: rgba(0, 87, 255, 0.13);
  --accent-alpha-16: rgba(0, 87, 255, 0.16);
  --accent-alpha-22: rgba(0, 87, 255, 0.22);
  --accent-alpha-30: rgba(0, 87, 255, 0.3);
  --accent-alpha-40: rgba(0, 87, 255, 0.4);

  /* =========================================================
     Text and typography
  ========================================================= */

  --bg-text-color: rgba(255, 255, 255, 0.42);

  --bs-font-sans-serif: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  --bs-font-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;

  /* =========================================================
     Gradients
  ========================================================= */

  --bs-gradient: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0)
  );

  /*
   * Main premium brand gradient.
   * Use for the hero, dark CTA sections and major backgrounds.
   */
  --bg-linear-grad: linear-gradient(
    24deg,
    #061f42 0%,
    #073f91 48%,
    #0057ff 100%
  );

  /*
   * Darker version for footer, navigation overlays
   * and dark secondary sections.
   */
  --bg-linear-grad-dark: linear-gradient(
    135deg,
    #03152e 0%,
    #061f42 52%,
    #073f91 100%
  );

  /*
   * Sharp blue-only gradient.
   * Use sparingly for secondary buttons or graphical accents.
   */
  --bg-linear-grad-blue: linear-gradient(
    135deg,
    #1649c9 0%,
    #0057ff 52%,
    #2474ff 100%
  );

  /*
   * Orange gradient for main CTA buttons.
   * A flat orange button can still use --action-color instead.
   */
  --bg-linear-grad-orange: linear-gradient(
    135deg,
    #ff8b2b 0%,
    #ff6a00 52%,
    #d94f00 100%
  );

  /*
   * Very subtle light-blue surface gradient.
   */
  --surface-linear-grad: linear-gradient(
    135deg,
    #ffffff 0%,
    #f6f9ff 54%,
    #edf3ff 100%
  );

  --nav-link-hover: #ff8b2b;

  /* =========================================================
     Layout
  ========================================================= */

  --container-width: 152rem;
  --section-space: clamp(8rem, 10vw, 15rem);
  --radius: 0.8rem;

  /* =========================================================
     Shadows
  ========================================================= */

  --shadow-soft: 0 2.4rem 7rem rgba(6, 31, 66, 0.16);

  --shadow-blue: 0 2rem 5rem rgba(0, 87, 255, 0.2);

  --shadow-orange: 0 1.6rem 4rem rgba(255, 106, 0, 0.22);
}

/* =========================================================
   AsanLink theme
========================================================= */

.asanlink-theme {
  /* Core colors */

  --bs-blue: #0057ff;
  --bs-indigo: #1649c9;

  --primary-deep: #061f42;
  --surface-dark: #03152e;

  --action-color: #ff6a00;
  --action-color-dark: #d94f00;
  --accent-color: #0057ff;

  /* Surfaces */

  --surface-color: #f8faff;
  --surface-blue: #edf3ff;
  --border-color: #d3deed;
  --form-border-color: #c5d2e2;

  /* Brand gradients */

  --bg-linear-grad: linear-gradient(
    24deg,
    #061f42 0%,
    #073f91 48%,
    #0057ff 100%
  );

  --bg-linear-grad-dark: linear-gradient(
    135deg,
    #03152e 0%,
    #061f42 52%,
    #073f91 100%
  );

  --bg-linear-grad-blue: linear-gradient(
    135deg,
    #1649c9 0%,
    #0057ff 52%,
    #2474ff 100%
  );

  --bg-linear-grad-orange: linear-gradient(
    135deg,
    #ff8b2b 0%,
    #ff6a00 52%,
    #d94f00 100%
  );

  --nav-link-hover: #ff8b2b;

  /* Shadows */

  --shadow-soft: 0 2.4rem 7rem rgba(6, 31, 66, 0.16);
  --shadow-blue: 0 2rem 5rem rgba(0, 87, 255, 0.2);
  --shadow-orange: 0 1.6rem 4rem rgba(255, 106, 0, 0.22);
}