@import "tailwindcss";
@import "@heroui/styles";

@layer base {

  /* HeroUI Default Theme */
  :root {
    color-scheme: light;

    /* == GLMA Brand Variables (from WordPress) == */
    --clb-color-primary: #7646DD;
    --clb-color-secondary: #7646DD;
    --clb-color-black: #111013;
    --clb-border-radius: 0.5rem;
    --clb-transition-duration: .35s;

    /* == Common Variables == */

    /* Primitive Colors (Do not change between light and dark) */
    --white: oklch(100% 0 0);
    --black: var(--clb-color-black);
    --snow: oklch(0.9911 0 0);
    --eclipse: #111013;

    /* Spacing scale */
    --spacing: 0.25rem;

    /* Border */
    --border-width: 1px;
    --field-border-width: 0px;
    --disabled-opacity: 0.5;

    /* Ring offset - Used for focus ring */
    --ring-offset-width: 2px;

    /* Cursor */
    --cursor-interactive: pointer;
    --cursor-disabled: not-allowed;

    /* Radius */
    --radius: var(--clb-border-radius);
    --field-radius: calc(var(--radius) * 1.5);

    /* == Light Theme Variables == */

    /* Base Colors mapped to Brand */
    --background: #F8F9FA;
    --foreground: var(--clb-color-black);

    /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
    --surface: var(--white);
    --surface-foreground: var(--foreground);

    /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) */
    --overlay: var(--white);
    --overlay-foreground: var(--foreground);

    --muted: #6C757D;
    --scrollbar: #E9ECEF;

    --default: #F1F3F5;
    --default-foreground: var(--eclipse);

    --accent: var(--clb-color-primary);
    --accent-foreground: var(--white);

    /* Form Field Defaults - Colors */
    --field-background: var(--white);
    --field-foreground: #66425d;
    --field-placeholder: var(--muted);
    --field-border: transparent;
    /* no border by default on form fields */

    /* Status Colors */
    --success: #29A366;
    --success-foreground: var(--white);

    --warning: #EC8013;
    --warning-foreground: var(--white);

    --danger: var(--clb-color-primary);
    --danger-foreground: var(--white);

    /* Component Colors */
    --segment: var(--white);
    --segment-foreground: var(--eclipse);

    /* Misc Colors */
    --border: color-mix(in srgb, var(--clb-color-black) 8%, transparent);
    --separator: color-mix(in srgb, var(--clb-color-black) 8%, transparent);
    --focus: var(--accent);
    --link: var(--clb-color-primary);

    /* Shadows mapped to WP presets */
    --surface-shadow: 6px 6px 9px rgba(0, 0, 0, 0.1);
    /* Overlay shadow */
    --overlay-shadow: 12px 12px 50px rgba(0, 0, 0, 0.2);
    --field-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

    /* Skeleton Default Global Animation */
    --skeleton-animation: shimmer;
    /* shimmer, pulse, none */
  }

  .dark,
  [data-theme="dark"] {
    color-scheme: dark;
    /* == Dark Theme Variables == */
    --clb-color-primary: #66425d;

    /* Base Colors */
    --background: #0B0A0C;
    --foreground: #F8F9FA;

    /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
    --surface: #111013;
    --surface-foreground: var(--foreground);

    /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */
    --overlay: #1A191C;
    /* A bit lighter than surface for visibility in dark mode */
    --overlay-foreground: var(--foreground);

    --muted: #ADB5BD;
    --scrollbar: #343A40;

    --default: #212529;
    --default-foreground: var(--foreground);

    /* Form Field Defaults - Colors (only the ones that are different from light theme) */
    --field-background: var(--default);
    --field-foreground: var(--foreground);

    /* Status Colors (Same as brand light) */

    /* Component Colors */
    --segment: #212529;
    --segment-foreground: var(--foreground);

    /* Misc Colors */
    --border: rgba(255, 255, 255, 0.08);
    --separator: rgba(255, 255, 255, 0.08);
    --focus: var(--accent);
    --link: var(--foreground);

    /* Shadows */
    --surface-shadow: none;
    /* No shadow on dark mode */
    --overlay-shadow: 0 10px 50px rgba(0,0,0,0.5);
    /* No shadow on dark mode */
    --field-shadow: 0 0 0 0 transparent inset;
    /* Transparent shadow to allow ring utilities to work */
  }

  body {
    @apply bg-background text-foreground antialiased selection:bg-accent-soft-hover selection:text-accent font-sans;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: "DM Sans", sans-serif;
    @apply font-bold tracking-tight;
  }
}

@layer components {
  .card-premium {
    @apply bg-surface border border-border rounded-2xl shadow-surface transition-all duration-300 hover:shadow-overlay hover:-translate-y-1;
  }
}