@import "tailwindcss";

@plugin 'tailwindcss-animate';

@custom-variant dark (&:where(.dark, .dark *));

@layer base {
  h1 {
    font-family: var(--font-sans);
    font-weight: var(--text-base);
    font-size: 18px;
    line-height: 24.2px;
    letter-spacing: 0;
    color: var(--color-main-950);

    @variant md {
      font-size: 20px;
    }
  }

  h2 {
    font-family: var(--font-sans);
    font-weight: var(--text-base);
    font-size: 16px;
    line-height: 20.57px;
    letter-spacing: 0;
    color: var(--color-main-950);

    @variant md {
      font-size: 17px;
    }
  }
}

@keyframes section-highlight {
  0% {
    fill: var(--color-secondary-500);
  }
  12.5% {
    fill: var(--color-main-100);
  }
  100% {
    fill: var(--color-main-100);
  }
}

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);

  --color-main-50: #f7f7f8;
  --color-main-100: #ededf1;
  --color-main-200: #d8d9df;
  --color-main-300: #b6b7c3;
  --color-main-400: #8e90a2;
  --color-main-500: #707287;
  --color-main-600: #5a5b6f;
  --color-main-700: #4a4a5a;
  --color-main-800: #40414c;
  --color-main-900: #383842;
  --color-main-950: #1c1c21;

  --color-secondary-50: #ffffe7;
  --color-secondary-100: #feffc1;
  --color-secondary-200: #fffc86;
  --color-secondary-300: #fff241;
  --color-secondary-400: #ffe30d;
  --color-secondary-500: #ffd400;
  --color-secondary-600: #d19c00;
  --color-secondary-700: #a66f02;
  --color-secondary-800: #89560a;
  --color-secondary-900: #74470f;
  --color-secondary-950: #442504;

  /*--color-secondary-50: #eefffc;*/
  /*--color-secondary-100: #c5fff7;*/
  /*--color-secondary-200: #8bfff0;*/
  /*--color-secondary-300: #4afee8;*/
  /*--color-secondary-400: #00a89d;*/
  /*--color-secondary-500: #00d0c0;*/
  /*--color-secondary-600: #00a89d;*/
  /*--color-secondary-700: #00827c;*/
  /*--color-secondary-800: #066966;*/
  /*--color-secondary-900: #0a5753;*/
  /*--color-secondary-950: #003435;*/

  --font-sans:
    var(--font-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --font-heading:
    var(--font-heading), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";

  --grid-template-rows-layout: var(--height-2) 1fr;
  --grid-template-rows-columns: 1fr var(--height-2);

  --animate-section-1: section-highlight 0.8s infinite steps(1);
  --animate-section-2: section-highlight 0.8s infinite steps(1) -0.1s;
  --animate-section-3: section-highlight 0.8s infinite steps(1) -0.2s;
  --animate-section-4: section-highlight 0.8s infinite steps(1) -0.3s;
  --animate-section-5: section-highlight 0.8s infinite steps(1) -0.4s;
  --animate-section-6: section-highlight 0.8s infinite steps(1) -0.5s;
  --animate-section-7: section-highlight 0.8s infinite steps(1) -0.6s;
  --animate-section-8: section-highlight 0.8s infinite steps(1) -0.7s;

  --mobile-container: 336px;
}

/* Safari NumberFlow alignment fix for < 16px font sizes with symbols */
number-flow-react::part(left),
number-flow-react::part(right),
number-flow-react::part(left)::after,
number-flow-react::part(right)::after,
number-flow-react::part(symbol) {
  padding: calc(var(--number-flow-mask-height, 0.25em) / 2) 0;
}

/* https://base-ui.com/react/overview/quick-start */
.Root {
  isolation: isolate;
}
