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

:root {
  --numu-black: #000000;
  --numu-ink: #1d2939;
  --numu-purple: #32004b;
  --numu-yellow: #ffda8b;
  --numu-gold: #d5b674;
  --numu-bronze: #aa915d;
  --apple-bg: #ffffff;
  --apple-text: var(--numu-black);
  --apple-text-secondary: rgba(29, 41, 57, 0.72);
  --apple-blue: var(--numu-purple);
  --apple-blue-hover: #210032;
  --apple-green: #27a66d;
  --apple-separator: rgba(29, 41, 57, 0.1);
  --apple-radius: 16px;
  --apple-radius-sm: 12px;
  --apple-radius-pill: 980px;
  --apple-shadow: 0 18px 42px rgba(29, 41, 57, 0.08);
  --apple-shadow-lg: 0 26px 64px rgba(29, 41, 57, 0.13);
}

@layer base {
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    background:
      radial-gradient(circle at 12% 10%, rgba(255, 218, 139, 0.22), transparent 23rem),
      radial-gradient(circle at 88% 4%, rgba(50, 0, 75, 0.06), transparent 18rem),
      #ffffff;
    color: var(--apple-text);
  }
}

@layer components {
  .od-app {
    min-height: 100dvh;
    background:
      radial-gradient(circle at 14% 12%, rgba(255, 218, 139, 0.16), transparent 24rem),
      radial-gradient(circle at 92% 2%, rgba(50, 0, 75, 0.055), transparent 20rem),
      #ffffff;
  }

  .od-panel {
    background: var(--apple-bg);
    border: 1px solid rgba(29, 41, 57, 0.08);
    border-radius: var(--apple-radius);
    box-shadow: var(--apple-shadow);
  }

  .apple-btn-primary {
    @apply inline-flex items-center justify-center rounded-2xl px-5 py-2.5 text-sm font-extrabold tracking-tight transition active:scale-[0.98];
    background: var(--numu-yellow);
    color: var(--numu-black);
    box-shadow: 0 12px 28px rgba(255, 218, 139, 0.34);
  }

  .apple-btn-primary:hover {
    background: #ffd275;
  }

  .apple-btn-secondary {
    @apply inline-flex items-center justify-center rounded-2xl border px-5 py-2.5 text-sm font-extrabold tracking-tight transition;
    border-color: rgba(170, 145, 93, 0.22);
    color: var(--apple-text);
  }

  .apple-btn-secondary:hover {
    background: rgba(255, 218, 139, 0.2);
    color: var(--numu-purple);
  }

  .apple-large-title {
    @apply text-[clamp(32px,4vw,52px)] font-extrabold leading-[1.08] tracking-tight;
  }

  .apple-subhead {
    @apply text-[15px] tracking-tight;
    color: var(--apple-text-secondary);
  }
}