@import "tailwindcss";

/* ─── Design Tokens ─────────────────────────────────────── */
@theme {
  /* Colors — Primary */
  --color-primary:        #1D4ED8;
  --color-primary-hover:  #1A43C0;
  --color-primary-light:  #EFF6FF;
  --color-primary-dark:   #1E3A5F;

  /* Colors — Navy / Dark backgrounds */
  --color-navy:           #0F172A;
  --color-navy-mid:       #1E293B;
  --color-navy-light:     #334155;

  /* Colors — Text */
  --color-text-heading:   #0F172A;
  --color-text-body:      #475569;
  --color-text-muted:     #64748B;
  --color-text-subtle:    #94A3B8;
  --color-text-faint:     #CBD5E1;

  /* Colors — Backgrounds */
  --color-bg-white:       #FFFFFF;
  --color-bg-alt:         #F8FAFF;
  --color-bg-card:        #F8FAFC;

  /* Colors — Borders */
  --color-border:         #E2E8F0;
  --color-border-dark:    #334155;

  /* Colors — Status */
  --color-success:        #059669;
  --color-success-bg:     #ECFDF5;
  --color-success-text:   #4ADE80;
  --color-success-dark:   #14532D;

  --color-warning:        #CA8A04;
  --color-warning-bg:     #FEF9C3;

  --color-danger:         #E11D48;
  --color-danger-bg:      #FFF1F2;

  /* Colors — Accent */
  --color-purple:         #7C3AED;
  --color-purple-bg:      #F3E8FF;

  --color-sky:            #0284C7;
  --color-sky-bg:         #E0F2FE;

  --color-blue-400:       #60A5FA;

  /* Typography */
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* ─── Base overrides ─────────────────────────────────────── */
@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--font-sans);
    color: #475569;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ─── Custom component utilities ─────────────────────────── */
@layer utilities {
  .page-container {
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: 100px;
  }

  @media (max-width: 1280px) {
    .page-container {
      padding-inline: 64px;
    }
  }

  @media (max-width: 1024px) {
    .page-container {
      padding-inline: 40px;
    }
  }

  @media (max-width: 640px) {
    .page-container {
      padding-inline: 24px;
    }
  }
}
