@import "tw-animate-css";
@import "shadcn/tailwind.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* ── Light theme (default) ── */
  :root,
  [data-theme="light"] {
    --color-bg:             #FFFFFF;
    --color-surface:        #F2F3F3;
    --color-surface-raised: #E5F1EF;
    --color-surface-border: #EFEFF1;
    --color-card-border:    #D7D7DF;

    --color-primary:        #007560;
    --color-primary-dim:    #004937;
    --color-accent:         #007560;
    --color-gold:           #FFC600;
    --color-gold-dim:       #916C0F;

    --color-success:        #007560;
    --color-warning:        #FCF5E7;
    --color-danger:         #B00020;
    --color-info:           #007560;

    --color-text:           #222222;
    --color-text-secondary: #6F6F6F;
    --color-text-dim:       #6F6F6F;

    --color-elevation-fill:       #D9EAE7;
    --color-elevation-hover:      #E5F1EF;

    --shadow-card:      0 0 0 1px var(--color-card-border);
    --shadow-raised:    0 0 0 1px var(--color-primary);
    --shadow-glow-blue: none;
    --shadow-glow-gold: none;

    /* shadcn compatibility */
    --background: #FFFFFF;
    --foreground: #222222;
    --card: #F2F3F3;
    --card-foreground: #222222;
    --border: #D7D7DF;
    --ring: #007560;
    --radius: 0.9375rem;
  }

  /* ── Dark theme ── */
  [data-theme="dark"] {
    --color-bg:             #212427;
    --color-surface:        #373B40;
    --color-surface-raised: #2B4E48;
    --color-surface-border: #5A5A5A;
    --color-card-border:    #5A5A5A;

    --color-primary:        #7FC9BB;
    --color-primary-dim:    #27A28D;
    --color-accent:         #7FC9BB;
    --color-gold:           #856700;
    --color-gold-dim:       #916C0F;

    --color-success:        #7FC9BB;
    --color-warning:        #916C0F;
    --color-danger:         #CF6679;
    --color-info:           #7FC9BB;

    --color-text:           #E2E2E2;
    --color-text-secondary: #BDBDBD;
    --color-text-dim:       #BDBDBD;

    --color-elevation-fill:       #2B4E48;
    --color-elevation-hover:      #2B4E48;

    --shadow-card:      0 0 0 1px var(--color-card-border);
    --shadow-raised:    0 0 0 1px var(--color-primary);
    --shadow-glow-blue: none;
    --shadow-glow-gold: none;

    /* shadcn compatibility */
    --background: #212427;
    --foreground: #E2E2E2;
    --card: #373B40;
    --card-foreground: #E2E2E2;
    --border: #5A5A5A;
    --ring: #7FC9BB;
    --radius: 0.9375rem;
  }

  * {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    background-color: var(--color-bg);
    transition: background-color 0.2s ease;
  }

  body {
    background-color: var(--color-bg);
    color: var(--color-text);
    /* Dubai font not available on Google Fonts — using Noto Sans as fallback */
    font-family: var(--font-dubai), ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  ::selection {
    background-color: rgba(0, 117, 96, 0.2);
    color: var(--color-text);
  }

  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: var(--color-bg); }
  ::-webkit-scrollbar-thumb { background: var(--color-surface-border); border-radius: 3px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--color-primary-dim); }
}

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

  .section-eyebrow {
    @apply text-xs font-medium tracking-widest uppercase text-text-dim;
  }

  .section-divider {
    @apply w-12 h-0.5 bg-gradient-to-r from-primary to-accent rounded-full my-4;
  }

  .card-base {
    @apply bg-surface border border-surface-border rounded-lg p-6 shadow-card hover:shadow-raised hover:bg-surface-raised transition-all duration-200;
  }

  .gradient-text {
    @apply bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent;
  }
}