@import "tailwindcss";

/* PART 4 — TYPOGRAPHY SYSTEM */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&family=Montserrat:wght@600;700;800;900&family=Poppins:wght@500;600;800&family=Roboto+Mono:wght@400;500;700&display=swap');

@theme {
  /* PART 2 — COMPLETE COLOUR SYSTEM */
  
  /* 2.1 — Foundation Colours (The Dark Palette) */
  --color-casa-navy-900: #0A1628; /* Deepest background — App Shell */
  --color-casa-navy-800: #0D1B2A; /* Primary background */
  --color-casa-navy-700: #152338; /* Secondary background */
  --color-casa-navy-600: #1A2744; /* Card background */
  --color-casa-navy-500: #1E3556; /* Card hover state */
  --color-casa-navy-400: #243D66; /* Modal background */
  --color-casa-navy-300: #2C4A7A; /* Active state */
  --color-casa-navy-200: #3A5F96; /* Selected / focus ring */

  /* 2.2 — Gold Accent System (The Metallic Palette) */
  --color-casa-gold-bright: #F5D78E;
  --color-casa-gold-mid: #C9A84C;
  --color-casa-gold-dark: #8B6914;
  --color-casa-gold-flat: #D4A017;
  --color-casa-gold-muted: #9A7B3A;
  
  /* 2.3 — Text Colours */
  --color-text-primary: #F5D78E;   /* Gold */
  --color-text-secondary: #E8E8F0; /* Near-white */
  --color-text-tertiary: #8A9BB5;  /* Muted blue-gray */
  --color-text-disabled: #4A5568;
  --color-text-mono: #C9A84C;

  /* 2.4 — Confidence Tier Colours */
  --color-tier-t0-bg: #003300;
  --color-tier-t0-border: #00E676;
  --color-tier-t0-text: #00E676;
  
  --color-tier-t1-bg: #1B3A1F;
  --color-tier-t1-border: #4CAF50;
  --color-tier-t1-text: #4CAF50;

  --color-tier-t2-bg: #3A2400;
  --color-tier-t2-border: #FF9800;
  --color-tier-t2-text: #FF9800;

  --color-tier-t3-bg: #3A1A00;
  --color-tier-t3-border: #F44336;
  --color-tier-t3-text: #F44336;

  --color-tier-t4-bg: #2A0A0A;
  --color-tier-t4-border: #B71C1C;
  --color-tier-t4-text: #FF5252;

  /* 2.5 — Module Accent Colours */
  --color-module-estimating: #2C7BE5;
  --color-module-contracts: #7C3AED;
  --color-module-programme: #0891B2;
  --color-module-site-ops: #EA580C;
  --color-module-procurement: #16A34A;

  /* Fonts */
  --font-display: "Poppins", sans-serif;
  --font-heading: "Montserrat", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "Roboto Mono", monospace;
  
  /* Custom Shadows for Depth System */
  --shadow-casa-card: 0 4px 16px rgba(0,0,0,0.50), 0 0 0 1px rgba(201,168,76,0.10), inset 0 1px 0 rgba(245,215,142,0.06);
  --shadow-casa-card-hover: 0 8px 24px rgba(0,0,0,0.60), 0 0 20px rgba(201,168,76,0.12);
  --shadow-casa-modal: 0 24px 64px rgba(0,0,0,0.80), 0 0 60px rgba(201,168,76,0.15);
  --shadow-casa-gold-glow: 0 0 20px rgba(201,168,76,0.15);
}

@layer base {
  body {
    @apply bg-casa-navy-900 text-text-secondary font-body antialiased;
    /* PART 5.3 — Circuit Trace Background Pattern */
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10h80v80h-80z' fill='none' stroke='%23C9A84C' stroke-width='0.5' opacity='0.06'/%3E%3C/svg%3E");
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-display text-text-primary tracking-tight;
  }
}

@layer components {
  /* PART 7 — COMPONENT LIBRARY */

  /* 7.1 — Primary Button */
  .btn-primary {
    background: linear-gradient(135deg, #F5D78E 0%, #C9A84C 50%, #8B6914 100%);
    @apply text-casa-navy-900 font-display font-semibold text-sm tracking-wide px-6 py-2.5 rounded-lg uppercase transition-all hover:-translate-y-0.5 active:translate-y-0 border-none cursor-pointer;
    box-shadow: 0 4px 15px rgba(201,168,76,0.30);
  }
  .btn-primary:hover {
    box-shadow: 0 6px 25px rgba(201,168,76,0.50);
  }
  .btn-primary:active {
    box-shadow: 0 2px 8px rgba(201,168,76,0.30);
  }

  /* 7.2 — Secondary Button */
  .btn-secondary {
    @apply bg-transparent text-casa-gold-mid font-display font-semibold text-sm px-6 py-2.5 rounded-lg border border-casa-gold-mid/60 transition-all hover:bg-casa-gold-mid/10 hover:border-casa-gold-mid/90 cursor-pointer;
  }

  /* 7.3 — Destructive Button */
  .btn-destructive {
    @apply bg-[#B71C1C] text-white font-display font-semibold text-sm px-6 py-2.5 rounded-lg border border-[#F44336] shadow-lg cursor-pointer hover:bg-[#D32F2F];
    box-shadow: 0 0 16px rgba(183,28,28,0.40);
  }

  /* 7.4 — Data Card (Layer 3) */
  .card {
    @apply bg-casa-navy-600 rounded-xl p-5 transition-all;
    border: 1px solid rgba(201,168,76,0.40);
    box-shadow: var(--shadow-casa-card);
  }
  .card:hover {
    @apply bg-casa-navy-500 -translate-y-0.5;
    border-color: rgba(201,168,76,0.70);
    box-shadow: var(--shadow-casa-card-hover);
  }

  /* 7.5 — Form Input */
  .casa-input {
    @apply bg-casa-navy-800 rounded-lg px-3.5 py-2.5 font-body text-sm text-text-secondary w-full transition-all focus:outline-none;
    border: 1px solid rgba(201,168,76,0.30);
    box-shadow: none;
  }
  .casa-input:focus {
    border-color: rgba(201,168,76,0.80);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.15);
  }
  .casa-input::placeholder {
    @apply text-text-disabled;
  }

  /* 7.6 — BOQ Table Row */
  .boq-row {
    @apply bg-casa-navy-700 transition-colors border-b border-casa-gold-mid/10;
  }
  .boq-row:hover {
    @apply bg-casa-navy-600;
  }
  .boq-cell {
    @apply px-4 py-3 text-sm font-body text-text-secondary border-b border-casa-gold-mid/10;
  }
  .boq-cell-qty {
    @apply font-mono text-casa-gold-mid text-right;
  }
  .boq-cell-amount {
    @apply font-mono font-bold text-text-primary text-right;
  }

  /* 6.1 — Tier Badges */
  .tier-badge {
    @apply inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border-[1.5px] font-body text-[11px] font-medium tracking-wider uppercase cursor-pointer transition-shadow;
  }
  .tier-badge:hover {
    box-shadow: 0 0 20px var(--tier-glow);
  }
  .tier-code {
    @apply font-mono font-bold text-xs;
  }

  .badge-t0 { 
    @apply bg-tier-t0-bg border-tier-t0-border text-tier-t0-text; 
    --tier-glow: rgba(0, 230, 118, 0.25);
    box-shadow: 0 0 10px var(--tier-glow);
  }
  .badge-t1 { 
    @apply bg-tier-t1-bg border-tier-t1-border text-tier-t1-text; 
    --tier-glow: rgba(76, 175, 80, 0.20);
    box-shadow: 0 0 10px var(--tier-glow);
  }
  .badge-t2 { 
    @apply bg-tier-t2-bg border-tier-t2-border text-tier-t2-text; 
    --tier-glow: rgba(255, 152, 0, 0.20);
    box-shadow: 0 0 10px var(--tier-glow);
  }
  .badge-t3 { 
    @apply bg-tier-t3-bg border-tier-t3-border text-tier-t3-text; 
    --tier-glow: rgba(244, 67, 54, 0.20);
    box-shadow: 0 0 10px var(--tier-glow);
    animation: pulse-glow 2s infinite;
  }
  .badge-t4 { 
    @apply bg-tier-t4-bg border-tier-t4-border text-tier-t4-text; 
    --tier-glow: rgba(183, 28, 28, 0.25);
    box-shadow: 0 0 10px var(--tier-glow);
    animation: pulse-glow 2s infinite;
  }
}

@keyframes pulse-glow {
  0% { box-shadow: 0 0 10px var(--tier-glow); }
  50% { box-shadow: 0 0 20px var(--tier-glow); }
  100% { box-shadow: 0 0 10px var(--tier-glow); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
  animation: fadeIn 0.4s cubic-bezier(0.0, 0, 0.2, 1) forwards;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.animate-slideInRight {
  animation: slideInRight 0.3s cubic-bezier(0.0, 0, 0.2, 1) forwards;
}

@utility no-scrollbar {
  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none;
  scrollbar-width: none;
}