src/styles/globals.css

/* globals.css */
:root{
  --ama-start: 0 0 185;      /* rgb */
  --ama-end: 240 0 15;
  --gold: #D4AF37;
  --silver: #C0C0C0;
  --bronze: #CD7F32;
}

@layer utilities {
  /* Text gradient utility for AMA */
  .text-ama {
    background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* Button background using AMA gradient */
  .bg-ama {
    background-image: linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end)));
  }

  /* Hairline divider using AMA gradient */
  .rule-ama {
    height: 2px;
    background-image: linear-gradient(90deg, rgba(var(--ama-start), .0), rgb(var(--ama-start)), rgb(var(--ama-end)), rgba(var(--ama-end), .0));
  }

  /* Subtle gradient border (works on white cards) */
  .border-ama {
    border: 1px solid transparent;
    background:
      linear-gradient(#fff,#fff) padding-box,
      linear-gradient(90deg, rgb(var(--ama-start)), rgb(var(--ama-end))) border-box;
  }
}