@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  @apply bg-bg-primary;
}

.focus-ring-shadow-xs-skeuomorphic:focus {
  box-shadow: 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset, 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset, 0px 1px 2px 0px rgba(10, 13, 18, 0.05), 0px 0px 0px 2px #FFF, 0px 0px 0px 4px #3A43FF;
}

.ring-shadow-xs-skeuomorphic {
  box-shadow: 0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset, 0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset, 0px 1px 2px 0px rgba(10, 13, 18, 0.05), 0px 0px 0px 2px #FFF, 0px 0px 0px 4px #3A43FF;
}

.focus.ring-shadow-error:focus {
  box-shadow: 0px 0px 0px 2px #FFF, 0px 0px 0px 4px #F04438;
}

.ring-shadow-error {
  box-shadow: 0px 0px 0px 2px #FFF, 0px 0px 0px 4px #F04438;
}

.outline-sucess-outer {
  border-radius: 999px;
  border: 2px solid var(--Colors-Foreground-fg-success-primary, #47CD89);
  opacity: 0.1;
}

.outline-error-outer {
  border-radius: 24px;
  border: 2px solid var(--Colors-Foreground-fg-error-primary, #F97066);
  opacity: 0.1;
}

.outline-error-inter {
  border-radius: 24px;
  border: 2px solid var(--Colors-Foreground-fg-error-primary, #F97066);
  opacity: 0.3;
}

.outline-sucess-inter {
  border-radius: 999px;
  border: 2px solid var(--Colors-Foreground-fg-success-primary, #47CD89);
  opacity: 0.3;
}

@layer base {
  :root {
    /* ===== CORES BASE ===== */
    /* Neutras */
    --white: #fff;
    --black: #000;
    
    /* Gray Scale */
    --gray-25: #fdfdfd;
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e9eaeb;
    --gray-300: #d5d7da;
    --gray-400: #a4a7ae;
    --gray-500: #717680;
    --gray-600: #535862;
    --gray-700: #414651;
    --gray-800: #252b37;
    --gray-900: #181d27;
    --gray-950: #0a0d12;

    /* Brand Colors */
    --brand-25: #f5f7ff;
    --brand-50: #f0f3ff;
    --brand-100: #e4e9ff;
    --brand-200: #cdd6ff;
    --brand-300: #a5b2ff;
    --brand-400: #7280ff;
    --brand-500: #3a43ff;
    --brand-600: #1612ff;
    --brand-700: #0101ff;
    --brand-800: #0000cc;
    --brand-900: #0202b0;
    --brand-950: #000778;

    /* Semantic Colors */
    --error-25: #fffbfa;
    --error-50: #fef3f2;
    --error-100: #fee4e2;
    --error-200: #fecdca;
    --error-300: #fda29b;
    --error-400: #f97066;
    --error-500: #f04438;
    --error-600: #d92d20;
    --error-700: #b42318;
    --error-800: #912018;
    --error-900: #7a271a;
    --error-950: #55160c;

    --warning-25: #fffcf5;
    --warning-50: #fffaeb;
    --warning-100: #fef0c7;
    --warning-200: #fedf89;
    --warning-300: #fec84b;
    --warning-400: #fdb022;
    --warning-500: #f79009;
    --warning-600: #dc6803;
    --warning-700: #b54708;
    --warning-800: #93370d;
    --warning-900: #7a2e0e;
    --warning-950: #4e1d09;

    --success-25: #f6fef9;
    --success-50: #ecfdf3;
    --success-100: #dcfae6;
    --success-200: #abefc6;
    --success-300: #75e0a7;
    --success-400: #47cd89;
    --success-500: #17b26a;
    --success-600: #079455;
    --success-700: #067647;
    --success-800: #085d3a;
    --success-900: #074d31;
    --success-950: #053321;

    /* ===== TOKENS SEMÂNTICOS ===== */
    /* Text Tokens */
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-tertiary: var(--gray-600);
    --text-quaternary: var(--gray-500);
    --text-disabled: var(--gray-500);
    --text-placeholder: var(--gray-500);
    --text-white: var(--white);
    
    /* Brand Text */
    --text-brand-primary: var(--brand-600);
    --text-brand-secondary: var(--brand-700);
    --text-brand-tertiary: var(--brand-600);
    
    /* Semantic Text */
    --text-error: var(--error-600);
    --text-warning: var(--warning-600);
    --text-success: var(--success-600);

    /* Background Tokens */
    --bg-primary: var(--white);
    --bg-secondary: var(--gray-50);
    --bg-active: var(--gray-50);
    --bg-tertiary: var(--gray-100);
    --bg-quaternary: var(--gray-200);
    --bg-disabled: var(--gray-100);
    --bg-overlay: var(--gray-950);
    
    /* Brand Backgrounds */
    --bg-brand-primary: var(--brand-50);
    --bg-brand-secondary: var(--brand-100);
    --bg-brand-solid: var(--brand-600);
    
    /* Semantic Backgrounds */
    --bg-error-primary: var(--error-50);
    --bg-error-secondary: var(--error-100);
    --bg-error-solid: var(--error-600);
    --bg-warning-primary: var(--warning-50);
    --bg-warning-secondary: var(--warning-100);
    --bg-warning-solid: var(--warning-600);
    --bg-success-primary: var(--success-50);
    --bg-success-secondary: var(--success-100);
    --bg-success-solid: var(--success-600);

    /* Border Tokens */
    --border-primary: var(--gray-300);
    --border-secondary: var(--gray-200);
    --border-tertiary: var(--gray-100);
    --border-disabled: var(--gray-300);
    --border-brand: var(--brand-500);
    --border-error: var(--error-500);
    --border-warning: var(--warning-500);
    --border-success: var(--success-500);

    /* ===== SHADCN/UI TOKENS ===== */
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 240 100% 40%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --success: 125 83% 44%;
    --success-foreground: 210 40% 98%;
    --warning: 38 92% 50%;
    --warning-foreground: 210 40% 98%;
    --danger: 0 79% 59%;
    --danger-foreground: 210 40% 98%;
    --destructive: 0 79% 59%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 240 100% 40%;
    --radius: 0.5rem;
    
    /* Social Media Colors */
    --whatsapp: 142 80% 45%;
    --voice: 230 100% 61%;
    --video: 334 100% 61%;
    --instagram: 351 78% 51%;
  }

  .dark,
  :root[class~="dark"] {
    /* ===== CORES BASE (DARK) ===== */
    /* Gray Scale (Dark) */
    --gray-25: #fafafa;
    --gray-50: #f7f7f7;
    --gray-100: #f0f0f1;
    --gray-200: #ececed;
    --gray-300: #cecfd2;
    --gray-400: #94979c;
    --gray-500: #85888e;
    --gray-600: #61656c;
    --gray-700: #373a41;
    --gray-800: #22262f;
    --gray-900: #13161b;
    --gray-950: #0c0e12;

    /* ===== TOKENS SEMÂNTICOS (DARK) ===== */
    /* Text Tokens */
    --text-primary: var(--gray-50);
    --text-secondary: var(--gray-300);
    --text-tertiary: var(--gray-400);
    --text-quaternary: var(--gray-400);
    --text-disabled: var(--gray-500);
    --text-placeholder: var(--gray-500);
    --text-white: var(--white);
    
    /* Brand Text */
    --text-brand-primary: var(--brand-500);
    --text-brand-secondary: var(--gray-300);
    --text-brand-tertiary: var(--gray-400);
    
    /* Semantic Text */
    --text-error: var(--error-400);
    --text-warning: var(--warning-400);
    --text-success: var(--success-400);

    /* Background Tokens */
    --bg-primary: var(--gray-950);
    --bg-secondary: var(--gray-900);
    --bg-active: var(--gray-800);
    --bg-tertiary: var(--gray-800);
    --bg-quaternary: var(--gray-700);
    --bg-disabled: var(--gray-800);
    --bg-overlay: var(--gray-800);
    
    /* Brand Backgrounds */
    --bg-brand-primary: var(--brand-500);
    --bg-brand-secondary: var(--brand-600);
    --bg-brand-solid: var(--brand-600);
    
    /* Semantic Backgrounds */
    --bg-error-primary: var(--error-500);
    --bg-error-secondary: var(--error-600);
    --bg-error-solid: var(--error-600);
    --bg-warning-primary: var(--warning-500);
    --bg-warning-secondary: var(--warning-600);
    --bg-warning-solid: var(--warning-600);
    --bg-success-primary: var(--success-500);
    --bg-success-secondary: var(--success-600);
    --bg-success-solid: var(--success-600);

    /* Border Tokens */
    --border-primary: var(--gray-700);
    --border-secondary: var(--gray-800);
    --border-tertiary: var(--gray-800);
    --border-disabled: var(--gray-700);
    --border-brand: var(--brand-400);
    --border-error: var(--error-400);
    --border-warning: var(--warning-400);
    --border-success: var(--success-400);

    /* ===== SHADCN/UI TOKENS (DARK) ===== */
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 240 100% 50%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --success: 125 83% 44%;
    --success-foreground: 210 40% 98%;
    --warning: 38 92% 50%;
    --warning-foreground: 210 40% 98%;
    --danger: 0 79% 59%;
    --danger-foreground: 210 40% 98%;
    --destructive: 0 79% 59%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 240 100% 50%;
    --whatsapp: 142 70% 45%;
    --voice: 230 70% 61%;
    --video: 334 70% 61%;
    --instagram: 351 60% 51%;
  }

  body {
    @apply bg-background text-foreground antialiased transition-colors duration-200;
    font-feature-settings: "ss01", "ss02", "cv01", "cv02", "cv03";
  }

  ::-webkit-scrollbar {
    @apply w-2;
  }

  ::-webkit-scrollbar-track {
    @apply bg-muted;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-muted-foreground/30 rounded-full;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-muted-foreground/50;
  }
}

@layer base {
  * {
    @apply border-primary;
  }
  body {
    @apply bg-background text-foreground;
  }
}