@tailwind base;
@tailwind components;
@tailwind utilities;

/* =====================================
   Ivory University House — Brand Tokens
   ===================================== */
:root {
  /* Colors */
  --color-black: #000000;            /* Black */
  --color-white: #FFFFFF;            /* White */
  --color-iuh-red: #E84B3F;          /* IUH Red */
  --color-storm-cloud: #367D3D;      /* Storm Cloud */
  --color-french-blue: #4CA2C6;      /* French Blue */
  --color-mayonnaise: #F1C24B;       /* Mayonnaise */
  --color-neutral-porcelain: #E7E5E3;/* Light neutral background */
}

/* =====================================
   Font Faces (Placeholder)
   Drop WOFF/WOFF2 files into ./fonts
   ===================================== */
@font-face {
  font-family: "Acme Gothic";
  src:
    local("Acme Gothic Regular"),
    url("fonts/AcmeGothic-Regular.woff2") format("woff2"),
    url("fonts/AcmeGothic-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Acme Gothic";
  src:
    local("Acme Gothic Light"),
    url("fonts/AcmeGothic-Light.woff2") format("woff2"),
    url("fonts/AcmeGothic-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Acme Gothic";
  src:
    local("Acme Gothic SemiBold"),
    url("fonts/AcmeGothic-SemiBold.woff2") format("woff2"),
    url("fonts/AcmeGothic-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Acme Gothic";
  src:
    local("Acme Gothic Bold"),
    url("fonts/AcmeGothic-Bold.woff2") format("woff2"),
    url("fonts/AcmeGothic-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =====================
   Global Base Typography
   ===================== */
@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }
  body {
    font-family: "Acme Gothic", "Oswald", "Arial Narrow", Arial, Helvetica, sans-serif;
    font-weight: 400; /* Regular for body */
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-black);
    background-color: var(--color-white);
  }
  h1, h2 {
    font-weight: 700; /* Bold */
    letter-spacing: 0.005em;
  }
  h3, h4, h5, h6 {
    font-weight: 600; /* Semi-Bold */
    letter-spacing: 0.01em;
  }
  h1 {
    font-size: clamp(2rem, 2.6vw + 1rem, 3rem);
    line-height: 1.15;
  }
  h2 {
    font-size: clamp(1.625rem, 1.8vw + 1rem, 2.25rem);
    line-height: 1.2;
  }
  h3 {
    font-size: clamp(1.25rem, 1.2vw + 0.75rem, 1.75rem);
    line-height: 1.3;
  }
  a {
    color: var(--color-french-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  a:hover, a:focus {
    color: var(--color-iuh-red);
  }
}

/* =====================
   Components (Buttons, etc.)
   ===================== */
@layer components {
  .btn {
    font-family: inherit;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 0.5rem;
    padding: 0.625rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    text-decoration: none;
  }
  .btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-french-blue) 60%, white);
    outline-offset: 2px;
  }
  .btn-primary {
    background: var(--color-iuh-red);
    color: var(--color-white);
    border: 2px solid var(--color-iuh-red);
  }
  .btn-primary:hover {
    filter: brightness(0.9);
  }
  .btn-secondary {
    background: transparent;
    color: var(--color-french-blue);
    border: 2px solid var(--color-french-blue);
  }
  .btn-secondary:hover {
    background: var(--color-french-blue);
    color: var(--color-white);
  }
  .btn-tertiary {
    background: var(--color-neutral-porcelain);
    color: var(--color-black);
    border: 2px solid var(--color-neutral-porcelain);
  }
  .btn-tertiary:hover {
    filter: brightness(0.95);
  }
}

/* =====================
   Token Utility Classes
   (ensures no raw hex usage in components)
   ===================== */
@layer utilities {
  /* Text */
  .text-brand-black { color: var(--color-black) !important; }
  .text-brand-white { color: var(--color-white) !important; }
  .text-brand-red { color: var(--color-iuh-red) !important; }
  .text-brand-blue { color: var(--color-french-blue) !important; }
  .text-brand-yellow { color: var(--color-mayonnaise) !important; }
  .text-brand-green { color: var(--color-storm-cloud) !important; }
  .text-brand-gray { color: var(--color-neutral-porcelain) !important; }

  /* Background */
  .bg-brand-black { background-color: var(--color-black) !important; }
  .bg-brand-white { background-color: var(--color-white) !important; }
  .bg-brand-red { background-color: var(--color-iuh-red) !important; }
  .bg-brand-blue { background-color: var(--color-french-blue) !important; }
  .bg-brand-yellow { background-color: var(--color-mayonnaise) !important; }
  .bg-brand-green { background-color: var(--color-storm-cloud) !important; }
  .bg-brand-gray { background-color: var(--color-neutral-porcelain) !important; }

  /* Border */
  .border-brand-black { border-color: var(--color-black) !important; }
  .border-brand-white { border-color: var(--color-white) !important; }
  .border-brand-red { border-color: var(--color-iuh-red) !important; }
  .border-brand-blue { border-color: var(--color-french-blue) !important; }
  .border-brand-yellow { border-color: var(--color-mayonnaise) !important; }
  .border-brand-green { border-color: var(--color-storm-cloud) !important; }
  .border-brand-gray { border-color: var(--color-neutral-porcelain) !important; }

  /* SVG Fill/Stroke */
  .fill-brand-black { fill: var(--color-black) !important; }
  .fill-brand-white { fill: var(--color-white) !important; }
  .stroke-brand-black { stroke: var(--color-black) !important; }
  .stroke-brand-white { stroke: var(--color-white) !important; }
  .stroke-brand-red { stroke: var(--color-iuh-red) !important; }
  .stroke-brand-blue { stroke: var(--color-french-blue) !important; }
}