@import "tailwindcss";

/* ============================================
   PAVÉ UI — Design System Tokens
   ============================================ */

@theme {
  /* --- Raw Palette --- */

  --color-shadow-grey-50: #f4f1f3;
  --color-shadow-grey-100: #e8e3e7;
  --color-shadow-grey-200: #d2c6d0;
  --color-shadow-grey-300: #bbaab8;
  --color-shadow-grey-400: #a48ea1;
  --color-shadow-grey-500: #8e7189;
  --color-shadow-grey-600: #715b6e;
  --color-shadow-grey-700: #554452;
  --color-shadow-grey-800: #392d37;
  --color-shadow-grey-900: #1c171b;
  --color-shadow-grey-950: #141013;

  --color-cinnabar-50: #fce9e8;
  --color-cinnabar-100: #fad4d1;
  --color-cinnabar-200: #f5a9a3;
  --color-cinnabar-300: #f07d75;
  --color-cinnabar-400: #eb5247;
  --color-cinnabar-500: #e62719;
  --color-cinnabar-600: #b81f14;
  --color-cinnabar-700: #8a170f;
  --color-cinnabar-800: #5c100a;
  --color-cinnabar-900: #2e0805;
  --color-cinnabar-950: #200504;

  --color-mauve-shadow-50: #f4f1f3;
  --color-mauve-shadow-100: #e8e3e7;
  --color-mauve-shadow-200: #d1c7d0;
  --color-mauve-shadow-300: #baabb8;
  --color-mauve-shadow-400: #a38fa0;
  --color-mauve-shadow-500: #8c7389;
  --color-mauve-shadow-600: #705c6d;
  --color-mauve-shadow-700: #544552;
  --color-mauve-shadow-800: #382e37;
  --color-mauve-shadow-900: #1c171b;
  --color-mauve-shadow-950: #141013;

  --color-bone-50: #f5f3ef;
  --color-bone-100: #ece6df;
  --color-bone-200: #d8cdc0;
  --color-bone-300: #c5b4a0;
  --color-bone-400: #b19b81;
  --color-bone-500: #9e8361;
  --color-bone-600: #7e684e;
  --color-bone-700: #5f4e3a;
  --color-bone-800: #3f3427;
  --color-bone-900: #201a13;
  --color-bone-950: #16120e;

  --color-alabaster-grey-50: #f3f2f1;
  --color-alabaster-grey-100: #e7e5e4;
  --color-alabaster-grey-200: #d0cbc8;
  --color-alabaster-grey-300: #b8b1ad;
  --color-alabaster-grey-400: #a09792;
  --color-alabaster-grey-500: #887d77;
  --color-alabaster-grey-600: #6d645f;
  --color-alabaster-grey-700: #524b47;
  --color-alabaster-grey-800: #37322f;
  --color-alabaster-grey-900: #1b1918;
  --color-alabaster-grey-950: #131111;

  /* --- Semantic Tokens (Dark Luxury — extracted from aetherfox.studio) --- */

  --color-primary: #f5f5f5;
  --color-primary-hover: #ffffff;
  --color-accent: var(--color-cinnabar-400);
  --color-accent-hover: var(--color-cinnabar-300);
  --color-surface: #171717;
  --color-surface-raised: #262626;
  --color-surface-inset: #1f1f1f;
  --color-muted: #a1a1a1;
  --color-border: #404040;
  --color-border-subtle: #525252;
  --color-text: #f5f5f5;
  --color-text-secondary: #d4d4d4;
  --color-text-muted: #a1a1a1;
  --color-text-on-accent: #171717;
  --color-success: #4ade80;
  --color-success-muted: rgba(74, 222, 128, 0.12);
  --color-danger: var(--color-cinnabar-400);
  --color-danger-muted: rgba(235, 82, 71, 0.12);
  --color-warning: #fbbf24;
  --color-warning-muted: rgba(251, 191, 36, 0.12);
  --color-info: #60a5fa;
  --color-info-muted: rgba(96, 165, 250, 0.12);

  /* --- Typography --- */

  --font-heading: "Abril Fatface", serif;
  --font-body: "Roboto", sans-serif;

  /* --- Border Radius --- */

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  /* --- Shadows --- */

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* ============================================
   PAVÉ UI — Base Utilities
   ============================================ */

@layer components {
  .pave-heading {
    font-family: var(--font-heading);
    color: var(--color-text);
    line-height: 1.2;
    letter-spacing: 0.01em;
  }

  .pave-body {
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    line-height: 1.6;
  }

  .pave-link {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.15s ease;
    &:hover {
      color: var(--color-accent-hover);
    }
  }

  .pave-focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);
  }

  .pave-logo-triangle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .pave-logo-triangle::before {
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    background: white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
  }

  .pave-logo-triangle img {
    position: relative;
    z-index: 1;
  }

  .pave-stone-shadow {
    filter: drop-shadow(8px 10px 15px rgba(0, 0, 0, 0.7));
    transition: filter 0.3s ease;
    &:hover {
      filter: drop-shadow(16px 20px 20px rgba(0, 0, 0, 0.8));
    }
  }

  .pave-divider {
    border-color: var(--color-border);
    border-width: 0;
    border-top-width: 1px;
  }

  /* ============================================
     PAVÉ UI — Page Layout
     Single variable --pad controls ALL horizontal spacing.
     Container has NO padding. Elements use --pad directly.
     ============================================ */

  :root {
    --pad: 1.5rem;
  }
  @media (min-width: 768px) { :root { --pad: 2rem; } }
  @media (min-width: 1280px) { :root { --pad: 3rem; } }

  /* --- Page wrapper --- */

  .pave-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: clip;
  }

  /* --- Vertical border lines (fixed, full height) --- */

  .pave-page::before,
  .pave-page::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--color-border);
    z-index: 200;
    pointer-events: none;
  }
  .pave-page::before { left: var(--pad); }
  .pave-page::after { right: var(--pad); }

  /* --- Container (max-width, NO padding) --- */

  .pave-container {
    max-width: 80rem;
    margin: 0 var(--pad);
  }
  @media (min-width: calc(80rem + 6rem)) {
    .pave-container {
      margin: 0 auto;
    }
  }

  /* --- Horizontal line --- */

  .pave-line {
    border-top: 1px solid var(--color-border);
    margin-left: -1px;
    margin-right: -1px;
  }

  /* --- Header --- */

  .pave-header {
    position: sticky;
    top: 0;
    z-index: 70;
    background: transparent !important;
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: all 0.3s ease;
  }
  .pave-header.is-scrolled {
    background: rgba(23, 23, 23, 0.2) !important;
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
  }
  .pave-header-inner {
    padding: 0 var(--pad);
  }

  /* --- Hero --- */

  .pave-hero {
    position: relative;
    overflow: visible;
  }
  .pave-hero-content {
    position: relative;
    z-index: 10;
    padding: 6rem var(--pad);
  }
  @media (min-width: 768px) {
    .pave-hero-content { padding: 10rem var(--pad); }
  }
  @media (min-width: 1600px) {
    .pave-hero-content { padding: 10rem 0; }
  }
  .pave-hero-title {
    font-family: var(--font-heading);
    color: var(--color-text);
    font-size: clamp(2.5rem, 8vw, 5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
  }
  .pave-hero-image {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 65%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
  }
  .pave-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.5;
    mask-image: linear-gradient(to right, transparent 0%, black 40%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40%);
  }
  .pave-hero-stone {
    position: absolute;
    bottom: -3rem;
    right: 10%;
    z-index: 100;
    width: clamp(200px, 25vw, 400px);
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
    will-change: bottom, right, transform;
  }
  .pave-hero-stone img {
    width: 100%;
    height: auto;
    filter: drop-shadow(8px 10px 15px rgba(0, 0, 0, 0.7));
    transition: filter 0.3s ease;
  }
  .pave-hero-stone:hover img {
    filter: drop-shadow(16px 20px 20px rgba(0, 0, 0, 0.8));
  }

  /* --- Buttons (public page) --- */

  .pave-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-surface);
    background: var(--color-text);
    border: 1px solid var(--color-text);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.15s ease;
    &:hover { background: transparent; color: var(--color-text); }
  }
  .pave-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9999px;
    cursor: pointer;
    transition: color 0.15s ease;
    &:hover { color: var(--color-text); }
  }

  /* --- Features grid --- */

  .pave-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-left: -1px;
    margin-right: -1px;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
  }
  .pave-features-cell {
    padding: 2rem var(--pad);
  }
  .pave-features-cell--large {
    grid-column: 1;
    grid-row: 1 / 3;
    border-right: 1px solid var(--color-border);
  }
  .pave-features-cell--right {
    grid-column: 2;
  }
  .pave-features-cell--right + .pave-features-cell--right {
    border-top: 1px solid var(--color-border);
  }
  .pave-features-cell--bottom-left {
    grid-column: 1;
    border-top: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
  }
  .pave-features-cell--bottom-right {
    grid-column: 2;
    border-top: 1px solid var(--color-border);
  }

  @media (max-width: 767px) {
    .pave-features-grid { grid-template-columns: 1fr; border: none; margin: 0; }
    .pave-features-cell {
      border-bottom: 1px solid var(--color-border);
      border-right: none;
      border-top: none;
    }
    .pave-features-cell:last-child { border-bottom: none; }
    .pave-features-cell--large { grid-column: 1; grid-row: auto; }
    .pave-features-cell--right { grid-column: 1; }
    .pave-features-cell--bottom-left { grid-column: 1; }
    .pave-features-cell--bottom-right { grid-column: 1; }
  }

  /* --- Content (legal pages etc.) --- */

  .pave-content {
    padding: 2rem var(--pad);
  }

  /* --- Footer --- */

  .pave-footer {
    margin-top: auto;
    position: relative;
    z-index: 50;
    background: var(--color-surface);
  }
  .pave-footer-grid {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    margin-left: -1px;
    margin-right: -1px;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
  }
  .pave-footer-cell {
    padding: 1rem var(--pad);
    border-left: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    font-size: 0.75rem;
  }
  .pave-footer-cell:first-child {
    border-left: none;
  }
}