@import "tailwindcss";

/* ------------------------------------------------------------------ */
/*  Phina Consultant Limited — design tokens                           */
/* ------------------------------------------------------------------ */
@theme {
  /* Brand — teal */
  --color-brand-50: #edfcfa;
  --color-brand-100: #d0f6f1;
  --color-brand-200: #a3ece4;
  --color-brand-300: #6ddbd0;
  --color-brand-400: #38c2b6;
  --color-brand-500: #17a89c;
  --color-brand-600: #0e857d;
  --color-brand-700: #106b66;
  --color-brand-800: #125553;
  --color-brand-900: #123f3e;
  --color-brand-950: #04211f;

  /* Accent — warm sand */
  --color-accent-100: #fdecd6;
  --color-accent-200: #fbd6a9;
  --color-accent-300: #f9bd78;
  --color-accent-400: #f5a259;
  --color-accent-500: #e8842f;
  --color-accent-600: #c96a1e;

  /* Ink / neutrals */
  --color-ink-50: #f6f7f8;
  --color-ink-100: #eceef1;
  --color-ink-200: #d5dae0;
  --color-ink-300: #b0bac5;
  --color-ink-400: #7d8b9c;
  --color-ink-500: #586473;
  --color-ink-600: #414b58;
  --color-ink-700: #2f3743;
  --color-ink-800: #1c232d;
  --color-ink-900: #0d1b2a;
  --color-ink-950: #060e17;

  --color-cream: #f8f7f3;

  --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-sora), ui-sans-serif, system-ui, sans-serif;

  --shadow-card: 0 1px 2px rgb(13 27 42 / 0.04), 0 12px 32px -12px rgb(13 27 42 / 0.12);
  --shadow-lift: 0 24px 60px -20px rgb(13 27 42 / 0.28);
}

:root {
  --background: var(--color-cream);
  --foreground: var(--color-ink-900);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--color-brand-500);
  color: #fff;
}

/* Consistent page width */
.container-page {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 1024px) {
  .container-page {
    padding-inline: 2rem;
  }
}

/* Subtle reveal used across sections */
@keyframes phina-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal[data-shown] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .rise {
    animation: phina-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}