@import 'tailwindcss';
@import 'tw-animate-css';
@import './typography.css';
@import './header.css';
@import './animations.css';
@import './blog.css';
@import './forms.css';

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

:root {
  /* Palette */
  --neutral-200: #E6E8EF;
  --nebula-50: #F2F4FC;
  --nebula-100: #E4E8F6;
  --nebula-200: #C6CCE6;
  --nebula-500: #2942BE;
  --nebula-default: #020736;
  --nebula-600: #1A2D82;
  --amethyst-50: #F9E6FC;
  --amethyst-300: #EDBFF6;
  --amethyst-default: #8000C3;
  --amethyst-600: #713293;
  --ripe-berry-50: #FFE7EF;
  --ripe-berry-300: #FF9AC3;
  --fuscia-50: #F9E6FC;
  --fuscia-100: #FACAFF;
  --fuscia-200: #F0B3F6;
  --fuscia-300: #F580FF;
  --fuscia-default: #F164FF;
  --fuscia-600: #D95AE6;
  --surface-primary: #FFFFFF;
  --surface-secondary: #F1F3F8;
  --surface-tertiary: #E6E8EF;
  --border-strong: #B6BCCB;

  /* Semantic text */
  --text-primary: #020736;
  --text-secondary: #2B3245;
  --text-tertiary: #666266;
  --text-inverse: #FFFFFF;
  --text-inverted: #E4E8F6;

  /* Colors */
  --background: var(--surface-primary);
  --foreground: var(--nebula-default);
  --card: var(--surface-primary);
  --card-foreground: #667088;
  --popover: #ffffff;
  --popover-foreground: #2B3245;
  --primary: var(--nebula-default);
  --primary-foreground: var(--text-inverted);
  --secondary: var(--amethyst-50);
  --secondary-foreground: var(--text-primary);
  --tertiary: var(--ripe-berry-50);
  --tertiary-foreground: var(--text-primary);
  --muted: var(--surface-secondary);
  --muted-foreground: oklch(0.556 0 0);
  --accent: var(--amethyst-default);
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(100% 0.00011 271.152);
  --border: var(--border-strong);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --list-bullet: oklch(0.145 0 0);
  --marquee-card: var(--surface-secondary);
  --marquee-border: var(--border-strong);

  /* Viewport Constraints */
  --container-min-vw: 360px;
  --container-max-vw: 1224px;
  --container-gutter: 1.25rem;

  /* Spacing Constraints - use ai/clamp calculator for slope values */
  --section-sm-min: 2rem;
  --section-sm-slope: calc(1.7917rem + 0.9259vw);
  --section-sm-max: 2.5rem;

  --section-md-min: 2.5rem;
  --section-md-slope: calc(1.875rem + 2.7778vw);
  --section-md-max: 4rem;

  --section-lg-min: 4rem;
  --section-lg-slope: calc(3.5833rem + 1.8519vw);
  --section-lg-max: 5rem;

  /* Typography Bounds */
  --h1-min: 3rem;
  --h1-slope: calc(2.6875rem + 1.3889vw);
  --h1-max: 3.75rem;

  --h2-min: 2.25rem;
  --h2-slope: calc(1.9375rem + 1.3889vw);
  --h2-max: 3rem;

  --h3-min: 1.875rem;
  --h3-slope: calc(1.7188rem + 0.6944vw);
  --h3-max: 2.25rem;

  --h4-min: 1.5rem;
  --h4-slope: calc(1.3438rem + 0.6944vw);
  --h4-max: 1.875rem;

  --h5-min: 1.25rem;
  --h5-slope: calc(1.1458rem + 0.463vw);
  --h5-max: 1.5rem;

  --h6-min: 1.125rem;
  --h6-slope: calc(1.0729rem + 0.2315vw);
  --h6-max: 1.25rem;

  --body-sm-min: 0.75rem;
  --body-sm-slope: calc(0.6979rem + 0.2315vw);
  --body-sm-max: 0.875rem;

  --body-md-min: 1rem;
  --body-md-slope: calc(0.9479rem + 0.2315vw);
  --body-md-max: 1.125rem;

  --body-lg-min: 1.125rem;
  --body-lg-slope: calc(1.0729rem + 0.2315vw);
  --body-lg-max: 1.25rem;

  --marquee-min: 4rem;
  --marquee-slope: calc(2.672rem + 5.92vw);
  --marquee-max: 8rem;

  /* Weights & Tracking  */
  --body-leading: 1.2;
  --body-tracking: 0rem;
  --body-weight: 400;

  --display-leading: 1.2;
  --display-tracking: 0rem;
  --display-weight: 400;

  /* Spacing */
  --spacer-xs: 0.25rem;
  /* 4px */
  --spacer-sm: 0.5rem;
  /* 8px */
  --spacer-md: 1rem;
  /* 10px */
  --spacer-lg: 1.5rem;
  /* 24px */
  --spacer-xl: 2rem;
  /* 32px */
  --spacer-2xl: 3rem;
  /* 48px */

  /* Gradients */
  --gradient-primary: linear-gradient(to top right,
      var(--nebula-default),
      var(--nebula-default),
      var(--amethyst-default));

  --gradient-primary-alt: linear-gradient(255deg,
      var(--nebula-default),
      #1B114B,
      var(--amethyst-600));
}

.theme-white,
.theme-secondary,
.theme-tertiary {
  @apply text-secondary-foreground;
}

.theme-primary,
.theme-primary-gradient {
  /*
    Palette swap here.
    For each section, the background colour name is applied as a theme.

    Add a theme here and override the css variable e.g. change primary for darker backgrounds. 
    You can also override typography and spacing values.
  */

  --accent: var(--fuscia-default);

  --marquee-card: color-mix(in srgb,
      var(--surface-primary) 10%,
      transparent);

  --marquee-border: color-mix(in srgb,
      var(--neutral-200) 30%,
      transparent);

  @apply text-primary-foreground;
}

@theme inline {

  --color-neutral-200: var(--neutral-200);
  --color-nebula-50: var(--nebula-50);
  --color-nebula-100: var(--nebula-100);
  --color-nebula-200: var(--nebula-200);
  --color-nebula-500: var(--nebula-500);
  --color-nebula-default: var(--nebula-default);
  --color-nebula-600: var(--nebula-600);
  --color-amethyst-50: var(--amethyst-50);
  --color-amethyst-default: var(--amethyst-default);
  --color-amethyst-600: var(--amethyst-600);
  --color-ripe-berry-50: var(--ripe-berry-50);
  --color-fuscia-50: var(--fuscia-50);
  --color-fuscia-100: var(--fuscia-100);
  --color-fuscia-200: var(--fuscia-200);
  --color-fuscia-300: var(--fuscia-300);
  --color-fuscia-default: var(--fuscia-default);
  --color-fuscia-600: var(--fuscia-600);
  --color-surface-primary: var(--surface-primary);
  --color-surface-secondary: var(--surface--secondary);
  --color-surface-tertiary: var(--surface-tertiary);
  --color-ripe-berry-300: var(--ripe-berry-300);
  --color-amethyst-300: var(--amethyst-300);

  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-tertiary);
  --color-text-inverse: var(--text-inverse);
  --color-text-inverted: var(--text-inverted);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-tertiary: var(--tertiary);
  --color-tertiary-foreground: var(--tertiary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-bullet: var(--list-bullet);

  --color-marquee-card: var(--marquee-card);
  --color-marquee-border: var(--marquee-border);
  --color-header: #fff;


  /* Spacing */
  --spacing-max-vw: var(--container-max-vw);
  --spacing-container-gutter: var(--container-gutter);

  --spacing-spacer-xs: var(--spacer-xs);
  --spacing-spacer-sm: var(--spacer-sm);
  --spacing-spacer-md: var(--spacer-md);
  --spacing-spacer-lg: var(--spacer-lg);
  --spacing-spacer-xl: var(--spacer-xl);
  --spacing-spacer-2xl: var(--spacer-2xl);


  --spacing-section-sm: clamp(var(--section-sm-min),
      var(--section-sm-slope),
      var(--section-sm-max));
  --spacing-section-md: clamp(var(--section-md-min),
      var(--section-md-slope),
      var(--section-md-max));
  --spacing-section-lg: clamp(var(--section-lg-min),
      var(--section-lg-slope),
      var(--section-lg-max));

  /* Typography - Body */
  --text-body-sm: clamp(var(--body-sm-min),
      var(--body-sm-slope),
      var(--body-sm-max));
  --text-body-md: clamp(var(--body-md-min),
      var(--body-md-slope),
      var(--body-md-max));
  --text-body-lg: clamp(var(--body-lg-min),
      var(--body-lg-slope),
      var(--body-lg-max));

  /* Typography - Headings */
  --text-h1: clamp(var(--h1-min), var(--h1-slope), var(--h1-max));
  --text-h2: clamp(var(--h2-min), var(--h2-slope), var(--h2-max));
  --text-h3: clamp(var(--h3-min), var(--h3-slope), var(--h3-max));
  --text-h4: clamp(var(--h4-min), var(--h4-slope), var(--h4-max));
  --text-h5: clamp(var(--h5-min), var(--h5-slope), var(--h5-max));
  --text-h6: clamp(var(--h6-min), var(--h6-slope), var(--h6-max));
  --text-marquee: clamp(var(--marquee-min),
      var(--marquee-slope),
      var(--marquee-max));

  /* Fonts */
  --font-body: "Poppins", Arial, Helvetica, sans-serif;
  --font-weight-body-weight: var(--body-weight);
  --leading-body: var(--body-leading);
  --tracking-body: var(--body-tracking);

  --font-display: "Poppins", Arial, Helvetica, sans-serif;
  --font-weight-display-weight: var(--display-weight);
  --leading-display: var(--display-leading);
  --tracking-display: var(--display-tracking);

  /* Header Styling */
  --spacing-header-height: 5rem;
  --spacing-header-height-mobile: 4rem;
  --spacing-header-x: var(--spacing-container-gutter);
  --spacing-header-y: 0.5rem;
  --spacing-header-outer-y: 0.5rem;
  --radius-header: var(--radius-sm);
  --color-header-background: var(--accent);
  --color-header-foreground: var(--foreground);
  --shadow-header: var(--shadow-sm);

  /* Footer Styling */
  --spacing-footer-y: var(--spacer-md);
  --color-footer-background: var(--primary);
  --color-footer-foreground: var(--primary-foreground);

  /* Tabs Styling */
  --shadow-tabs-list: var(--shadow-sm);
  --spacing-tabs-list-x: 0.5rem;
  --spacing-tabs-list-y: 0.5rem;
  --spacing-tabs-list-gap: 0.5rem;
  --radius-tabs-list: 0.5rem;
  --color-tabs-list-background: var(--accent);

  --spacing-tab-x: 1rem;
  --spacing-tab-y: 0.25rem;
  --radius-tab: var(--radius-tabs-list);
  --color-tab-background: transparent;
  --color-tab-foreground: var(--foreground);
  --color-tab-active-background: var(--primary);
  --color-tab-active-foreground: var(--primary-foreground);
  --color-tab-accent: var(--primary);

  --background-image-cta-card: url('../assets/bg-cta-card.png');
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground font-body;
  }

  .section-wrapper {
    @apply max-md:bg-none overflow-hidden after:content-[''] after:z-[-1] after:inset-0 after:absolute after:w-full after:h-full relative;
  }

  .no-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
    appearance: none;
    cursor: pointer;
  }
}

@utility mask-gradient {
  mask-image: linear-gradient(90deg,
      transparent 0,
      black 4rem,
      black calc(100% - 4rem),
      transparent);
  -webkit-mask-image: linear-gradient(90deg,
      transparent 0,
      black 4rem,
      black calc(100% - 4rem),
      transparent);
}


@utility mask-gradient-right {
  mask-image: linear-gradient(90deg,
      black 0,
      black calc(100% - 4rem),
      transparent);
  -webkit-mask-image: linear-gradient(90deg,
      black 0,
      black calc(100% - 4rem),
      transparent);
}