@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Sora:wght@500;600;700;800&display=swap');

@layer base {
  :root {
    /* Jogja Spark — Light */
    --background: 210 20% 99%;
    --foreground: 224 60% 12%;

    --card: 0 0% 100%;
    --card-foreground: 224 60% 12%;

    --popover: 0 0% 100%;
    --popover-foreground: 224 60% 12%;

    /* Brand — Primary sky (#27aae1) */
    --primary: 197 75% 52%;
    --primary-foreground: 0 0% 100%;

    --secondary: 210 30% 96%;
    --secondary-foreground: 239 60% 19%;

    --muted: 210 25% 96%;
    --muted-foreground: 220 12% 46%;

    /* Accent = 3rd brand accent (deep navy #181946) */
    --accent: 239 60% 19%;
    --accent-foreground: 0 0% 100%;

    /* Semantic */
    --destructive: 350 99% 30%;        /* #97011A */
    --destructive-foreground: 0 0% 100%;
    --success: 79 55% 38%;             /* #76962D */
    --success-foreground: 0 0% 100%;
    --warning: 37 68% 51%;              /* #D99C2B */
    --warning-foreground: 0 0% 100%;

    /* Brand extras */
    --brand-1: 189 100% 40%;           /* #00A8CC — 1st accent */
    --brand-2: 214 32% 53%;            /* #5F83B1 — 2nd accent */
    --brand-3: 239 60% 19%;            /* #181946 — 3rd accent */

    --border: 220 15% 91%;
    --input: 220 15% 91%;
    --ring: 197 75% 52%;

    --radius: 0.35rem;

    --font-sans: 'Inter', system-ui, sans-serif;
    --font-display: 'Sora', 'Inter', sans-serif;
  }

  .dark {
    /* Jogja Spark — Dark */
    --background: 224 40% 7%;
    --foreground: 210 30% 96%;

    --card: 224 35% 10%;
    --card-foreground: 210 30% 96%;

    --popover: 224 35% 10%;
    --popover-foreground: 210 30% 96%;

    --primary: 197 75% 58%;
    --primary-foreground: 224 60% 10%;

    --secondary: 224 25% 15%;
    --secondary-foreground: 210 30% 96%;

    --muted: 224 25% 14%;
    --muted-foreground: 220 15% 65%;

    --accent: 214 32% 60%;
    --accent-foreground: 224 60% 10%;

    --destructive: 350 80% 45%;
    --destructive-foreground: 0 0% 100%;
    --success: 79 50% 48%;
    --success-foreground: 0 0% 100%;
    --warning: 37 75% 58%;
    --warning-foreground: 224 60% 10%;

    --brand-1: 189 90% 50%;
    --brand-2: 214 32% 60%;
    --brand-3: 239 40% 35%;

    --border: 224 25% 18%;
    --input: 224 25% 18%;
    --ring: 197 75% 58%;
  }
}

@layer base {
  * {
    border-color: hsl(var(--border));
    outline-color: hsl(var(--ring) / 0.5);
  }

  html {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-feature-settings: "cv11", "ss01";
  }

  h1, h2, h3, h4, .font-display {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: hsl(var(--primary));
  }

  .font-semibold, .font-bold, .font-extrabold {
    font-weight: 400 !important;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* Globally neutralize all Tailwind shadow utilities without removing the classes */
[class*="shadow"] {
  box-shadow: none !important;
}

@layer utilities {

  .bg-grid {
    background-image:
      linear-gradient(hsl(var(--border) / 0.5) 1px, transparent 1px),
      linear-gradient(90deg, hsl(var(--border) / 0.5) 1px, transparent 1px);
    background-size: 40px 40px;
  }

  .gradient-spark {
    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
  }

  .text-gradient-spark {
    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}