/* ============================================================
   FONT FACES
   Font files live in /public/fonts/ — run the download step
   from the README before using this in production.
   ============================================================ */

@font-face {
  font-family: 'Roboto';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/roboto/Roboto-VariableFont_wdth-wght.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: url('/fonts/roboto/Roboto-Italic-VariableFont_wdth-wght.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto Slab';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/roboto-slab/RobotoSlab-VariableFont_wght.woff2') format('woff2');
}

@font-face {
  font-family: 'Material Icons Round';
  font-weight: 400;
  font-style: normal;
  font-display: block;
  src: url('/fonts/material-icons-round/material-icons-round-latin-400-normal.woff2') format('woff2');
}

/* ============================================================
   TAILWIND v4
   ============================================================ */

@import "tailwindcss";

/* ============================================================
   SAFELIST
   Utilities built from dynamic class strings (template literals)
   are invisible to content scanning. @source inline() forces
   Tailwind to generate them regardless.
   ============================================================ */

@source inline("bg-gradient-primary bg-gradient-secondary bg-gradient-success bg-gradient-warning bg-gradient-danger bg-gradient-info bg-gradient-dark bg-gradient-light shadow-primary shadow-secondary shadow-success shadow-warning shadow-danger shadow-info shadow-dark");

/* ============================================================
   DESIGN TOKENS
   All values exposed as CSS custom properties AND Tailwind
   utility classes automatically via the @theme directive.
   ============================================================ */

@theme {
  /* ----------------------------------------------------------
     Colors
     Generates: bg-*, text-*, border-*, ring-*, etc.
     ---------------------------------------------------------- */
  --color-primary:   #e91e63;
  --color-secondary: #7b809a;
  --color-success:   #4caf50;
  --color-warning:   #fb8c00;
  --color-danger:    #f44335;
  --color-info:      #1a73e8;
  --color-light:     #f0f2f5;
  --color-dark:      #344767;

  --color-gray-100: #f8f9fa;
  --color-gray-200: #f0f2f5;
  --color-gray-300: #dee2e6;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --color-gray-900: #212529;

  /* ----------------------------------------------------------
     Typography
     --font-* → font-* utilities
     ---------------------------------------------------------- */
  --font-sans:  Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Roboto Slab', serif;
  --font-mono:  SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* ----------------------------------------------------------
     Shadows
     --shadow-* → shadow-* utilities

     soft-* palette: neutral depth shadows
     colored palette: signature glow for gradient cards/buttons
     ---------------------------------------------------------- */
  --shadow-soft-xs: 0 2px 9px -5px rgba(0, 0, 0, 0.15);
  --shadow-soft-sm: 0 0.3125rem 0.625rem 0 rgba(0, 0, 0, 0.12);
  --shadow-soft-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-soft-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-blur:    0 20px 27px rgba(0, 0, 0, 0.05);

  --shadow-primary:   0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4);
  --shadow-secondary: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(210, 210, 210, 0.4);
  --shadow-success:   0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(76, 175, 80, 0.4);
  --shadow-warning:   0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(251, 140, 0, 0.4);
  --shadow-danger:    0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(244, 67, 54, 0.4);
  --shadow-info:      0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(26, 115, 232, 0.4);
  --shadow-dark:      0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(64, 64, 64, 0.4);

  /* ----------------------------------------------------------
     Border Radius
     --radius-* → rounded-* utilities
     xs is the only addition; sm–2xl match Tailwind defaults.
     ---------------------------------------------------------- */
  --radius-xs: 0.1rem;

  /* ----------------------------------------------------------
     Gradients
     195deg is the kit's signature angle — do not change.
     --background-image-* → bg-* utilities
     ---------------------------------------------------------- */
  --background-image-gradient-primary:   linear-gradient(195deg, #ec407a, #d81b60);
  --background-image-gradient-secondary: linear-gradient(195deg, #747b8a, #495361);
  --background-image-gradient-success:   linear-gradient(195deg, #66bb6a, #43a047);
  --background-image-gradient-warning:   linear-gradient(195deg, #ffa726, #fb8c00);
  --background-image-gradient-danger:    linear-gradient(195deg, #ef5350, #e53935);
  --background-image-gradient-info:      linear-gradient(195deg, #49a3f1, #1a73e8);
  --background-image-gradient-dark:      linear-gradient(195deg, #42424a, #191919);
  --background-image-gradient-light:     linear-gradient(195deg, #ebeff4, #ced4da);
}

/* ============================================================
   BASE LAYER
   ============================================================ */

@layer base {
  /* Maps the .material-icons class to the self-hosted font */
  .material-icons {
    font-family: 'Material Icons Round';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
  }
}

/* ============================================================
   UTILITIES LAYER
   Custom utilities that can't be expressed as a single
   @theme token.
   ============================================================ */

@layer utilities {
  /* Gradient text — combine with a bg-gradient-* class */
  .text-gradient {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Rotating card — CSS 3D flip container */
  .rotating-card-container {
    perspective: 800px;
  }

  .rotating-card-container:hover .card-rotate {
    transform: rotateY(180deg);
  }

  .card-rotate {
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
  }

  .card-rotate .front,
  .card-rotate .back {
    backface-visibility: hidden;
    position: absolute;
    inset: 0;
  }

  .card-rotate .back {
    transform: rotateY(180deg);
  }

  /* Move on hover — interactive card lift */
  .move-on-hover {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .move-on-hover:hover {
    transform: translateY(-4px);
  }
}