/*
 * YourFashionID — style.css
 *
 * Layer order (low → high specificity):
 *   reset → tokens → base → layout → components
 */

@layer reset, tokens, base, layout, components;

/* ================================================================
   RESET
   ================================================================ */
@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }

  img, video {
    display: block;
    max-width: 100%;
  }

  input, button {
    font: inherit;
  }

  a {
    color: inherit;
  }

  ul, ol {
    list-style: none;
  }

  figure {
    margin: 0;
  }

  /* Remove animations for users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* ================================================================
   TOKENS — Design system
   ================================================================ */
@layer tokens {
  :root {
    /* ── Atelier palette ──────────────────────────────────
     *
     *  Warm neutrals built around natural materials:
     *  parchment, linen, stone — with a terracotta accent.
     *  Feels premium without being cold.
     *
     *  cream     page background
     *  linen     alternate section background
     *  warm      borders and dividers
     *  stone     secondary / muted text
     *  ink       primary text
     *  sienna    accent (CTAs, highlights)
     *  sienna-lt accent tint (subtle backgrounds)
     * ─────────────────────────────────────────────────── */
    --palette-cream:     #FAFAF8;
    --palette-linen:     #F2EEE8;
    --palette-warm:      #DDD8D0;
    --palette-stone:     #8A8680;
    --palette-ink:       #1A1916;
    --palette-sienna:    #B8733A;
    --palette-sienna-lt: #EDD9C8;
    --palette-white:     #FFFFFF;

    /* Semantic aliases — reference these in components, not raw palette */
    --color-bg:          var(--palette-cream);
    --color-bg-alt:      var(--palette-linen);
    --color-text:        var(--palette-ink);
    --color-text-muted:  var(--palette-stone);
    --color-border:      var(--palette-warm);
    --color-accent:      var(--palette-sienna);

    /* ── Typography ──────────────────────────────────────
     *  Playfair Display — editorial serif for headings
     *  Inter            — clean sans-serif for body
     * ─────────────────────────────────────────────────── */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;

    /* Fluid type scale using clamp(min, preferred, max) */
    --text-xs:   clamp(0.75rem,  0.72rem  + 0.15vw, 0.8125rem);
    --text-sm:   clamp(0.875rem, 0.84rem  + 0.2vw,  0.9375rem);
    --text-base: clamp(1rem,     0.96rem  + 0.2vw,  1.0625rem);
    --text-lg:   clamp(1.125rem, 1.05rem  + 0.4vw,  1.25rem);
    --text-xl:   clamp(1.375rem, 1.2rem   + 0.9vw,  1.75rem);
    --text-2xl:  clamp(1.75rem,  1.4rem   + 1.75vw, 2.5rem);
    --text-hero: clamp(3rem,     2rem     + 5vw,    5.5rem);

    --leading-tight:  1.15;
    --leading-snug:   1.4;
    --leading-normal: 1.65;

    --tracking-wide:  0.08em;
    --tracking-wider: 0.14em;

    /* ── Spacing scale ───────────────────────────────── */
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-32: 8rem;

    /* ── Layout ──────────────────────────────────────── */
    --max-width: 1100px;
    --gutter:    clamp(1.25rem, 5vw, 3rem);
    --nav-height: 4rem;

    /* ── Motion ──────────────────────────────────────── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration: 240ms;
  }
}

/* ================================================================
   BASE — Default element styles
   ================================================================ */
@layer base {
  html {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 300;
    line-height: var(--leading-normal);
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
  }

  a {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: opacity var(--duration) var(--ease-out);

    &:hover {
      opacity: 0.7;
    }

    &:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 3px;
      border-radius: 1px;
    }
  }

  /* Scroll offset so fixed nav doesn't cover anchor targets */
  section[id] {
    scroll-margin-block-start: var(--nav-height);
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ================================================================
   LAYOUT
   ================================================================ */
@layer layout {
  .container {
    inline-size: min(var(--max-width), 100% - var(--gutter) * 2);
    margin-inline: auto;
  }
}

/* ================================================================
   COMPONENTS
   ================================================================ */
@layer components {

  /* ── Buttons ───────────────────────────────────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--sp-3);
    padding-inline: var(--sp-6);
    font-size: var(--text-sm);
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition:
      background-color var(--duration) var(--ease-out),
      color            var(--duration) var(--ease-out),
      border-color     var(--duration) var(--ease-out),
      opacity          var(--duration) var(--ease-out);

    &:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 3px;
    }

    &--primary {
      background-color: var(--color-accent);
      color: var(--palette-white);
      border-color: var(--color-accent);

      &:hover {
        opacity: 0.88;
      }
    }

    &--outline {
      background-color: transparent;
      color: var(--color-text);
      border-color: currentColor;

      &:hover {
        background-color: var(--color-text);
        color: var(--palette-white);
        opacity: 1;
      }
    }

    &--sm {
      padding-block: var(--sp-2);
      padding-inline: var(--sp-4);
      font-size: var(--text-xs);
    }
  }

  /* ── Site Header ───────────────────────────────────────────── */
  .site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
    block-size: var(--nav-height);
    background-color: color-mix(in srgb, var(--color-bg) 85%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-block-end: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  }

  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    block-size: 100%;
  }

  .nav__logo {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 400;
    text-decoration: none;
    letter-spacing: -0.01em;
  }

  /* ── Hero ──────────────────────────────────────────────────── */
  .hero {
    position: relative;
    min-block-size: 100dvh;
    display: grid;
    /* Text anchored to the bottom-left — editorial */
    align-items: end;
  }

  .hero__media {
    position: absolute;
    inset: 0;

    /* Gradient overlay: legible text bottom-left, open top-right */
    &::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        hsl(30 8% 8% / 0.75) 0%,
        hsl(30 8% 8% / 0.3)  40%,
        transparent          70%
      );
    }
  }

  .hero__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center 25%;

    /*
     * Shown while the image loads or if img/hero.jpg is missing.
     * Replace with your real photo — see comment in index.html.
     */
    background: linear-gradient(
      160deg,
      var(--palette-linen)     0%,
      var(--palette-warm)      50%,
      var(--palette-sienna-lt) 100%
    );
  }

  .hero__content {
    position: relative;
    z-index: 1;
    padding-block: var(--sp-32) var(--sp-24);
    color: var(--palette-white);
    /* Ensures all text stays legible regardless of photo brightness */
    text-shadow: 0 1px 4px hsl(0 0% 0% / 0.35);
  }

  .hero__headline {
    font-size: var(--text-hero);
    font-weight: 400;
    line-height: var(--leading-tight);
    margin-block-end: var(--sp-6);
    max-inline-size: 14ch;
  }

  /* Sub text + CTA button on the same row */
  .hero__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-12);

    @media (width < 600px) {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--sp-6);
    }
  }

  .hero__sub {
    font-size: var(--text-lg);
    font-weight: 300;
    line-height: var(--leading-snug);
    color: hsl(0 0% 88%);
    max-inline-size: 38ch;
  }

  /* Reset text-shadow on button so it doesn't look blurry */
  .hero__bottom .btn {
    text-shadow: none;
    flex-shrink: 0;
  }

  /* ── Value Props + Occasions ───────────────────────────────── */
  .value {
    padding-block: var(--sp-32);
    background-color: var(--color-bg);
  }

  .value__props {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-8) var(--sp-12);
    margin-block-end: var(--sp-20);

    @media (width < 640px) {
      grid-template-columns: 1fr;
      gap: var(--sp-8);
    }
  }

  .value__prop {
    padding-block-start: var(--sp-5);
    border-block-start: 1px solid var(--color-border);
  }

  .value__prop-text {
    font-size: var(--text-xl);
    font-weight: 400;
    line-height: var(--leading-snug);
  }

  .value__occasions {
    display: flex;
    align-items: baseline;
    gap: var(--sp-6);
    flex-wrap: wrap;
  }

  .value__occasions-label {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
  }

  .occasions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);

    & li {
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      padding: var(--sp-1) var(--sp-3);
      border: 1px solid var(--color-border);
      border-radius: 999px;
      transition: border-color var(--duration) var(--ease-out),
                  color        var(--duration) var(--ease-out);

      &:hover {
        border-color: var(--color-accent);
        color: var(--color-accent);
      }
    }

    /* Size variations — make some tags visually heavier */
    & li:nth-child(3n+1) {
      font-size: var(--text-sm);
      padding-inline: var(--sp-4);
    }

    & li:nth-child(5n+2) {
      font-size: clamp(0.7rem, 0.65rem + 0.2vw, 0.75rem);
      padding-inline: var(--sp-2);
    }

    /* Subtle rotations — breaks the grid feel */
    & li:nth-child(2n)   { rotate: -1.5deg; }
    & li:nth-child(3n)   { rotate:  1deg;   }
    & li:nth-child(7n)   { rotate: -2deg;   }
    & li:nth-child(5n+3) { rotate:  1.5deg; }
  }

  /* ── Product Demo ──────────────────────────────────────────── */
  .concept {
    padding-block: var(--sp-32);
    background-color: var(--color-bg-alt);
  }

  .concept__heading {
    font-size: var(--text-2xl);
    margin-block-end: var(--sp-16);
  }

  .concept-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
    align-items: start;

    @media (width < 700px) {
      grid-template-columns: 1fr;
      max-inline-size: 380px;
      margin-inline: auto;
    }
  }

  .concept-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }

  /* Shared mockup shell */
  .concept-mockup {
    min-block-size: 260px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* ── Chat mockup ───────────────────────────────────────────── */
  .concept-mockup--chat {
    background-color: var(--palette-ink);
  }

  .chat-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-block-end: 1px solid hsl(0 0% 100% / 0.08);
  }

  .chat-header__dot {
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background-color: var(--palette-sienna);
    flex-shrink: 0;
  }

  .chat-header__name {
    font-size: var(--text-xs);
    color: hsl(0 0% 100% / 0.45);
    letter-spacing: var(--tracking-wide);
  }

  .chat-body {
    flex: 1;
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--sp-3);
  }

  .chat-bubble {
    max-inline-size: 82%;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    border-radius: 12px;
  }

  .chat-bubble--user {
    align-self: flex-end;
    background-color: var(--palette-sienna);
    color: var(--palette-white);
    border-end-end-radius: 3px;
  }

  .chat-bubble--bot {
    align-self: flex-start;
    background-color: hsl(0 0% 100% / 0.1);
    color: hsl(0 0% 100% / 0.65);
    border-end-start-radius: 3px;
  }

  /* ── Scan mockup ───────────────────────────────────────────── */
  .concept-mockup--scan {
    background-color: var(--palette-cream);
    border: 1px solid var(--color-border);
    padding: var(--sp-6);
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--sp-5);
  }

  .scan__title {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .scan__pulse {
    display: flex;
    gap: var(--sp-2);
    justify-content: center;

    & span {
      display: block;
      inline-size: 6px;
      block-size: 6px;
      border-radius: 50%;
      background-color: var(--color-accent);
      animation: pulse 1.4s ease-in-out infinite;

      &:nth-child(2) { animation-delay: 0.2s; }
      &:nth-child(3) { animation-delay: 0.4s; }
    }
  }

  @keyframes pulse {
    0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
    40%           { opacity: 1;   transform: scale(1);   }
  }

  .scan__brands {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: center;

    & li {
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      padding: var(--sp-1) var(--sp-3);
      border: 1px solid var(--color-border);
      border-radius: 999px;
    }
  }

  /* ── Result mockup ─────────────────────────────────────────── */
  .concept-mockup--result {
    background-color: var(--palette-white);
    border: 1px solid var(--color-border);
    padding: var(--sp-4) var(--sp-5);
    gap: var(--sp-3);
  }

  .result__title {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    letter-spacing: var(--tracking-wide);
    padding-block-end: var(--sp-3);
    border-block-end: 1px solid var(--color-border);
    flex-shrink: 0;
  }

  .result__items {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .result__item {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    column-gap: var(--sp-2);
    font-size: var(--text-xs);
  }

  .result__name {
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .result__brand {
    color: var(--color-text-muted);
  }

  .result__price {
    font-weight: 500;
  }

  .result__arrow {
    color: var(--color-accent);
    padding-inline-start: var(--sp-1);
  }

  .result__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block-start: var(--sp-3);
    border-block-start: 1px solid var(--color-border);
    font-size: var(--text-sm);
    font-weight: 500;
    flex-shrink: 0;

    & span:last-child {
      color: var(--color-accent);
    }
  }

  /* ── Concept card number + description ────────────────────── */
  .concept-card__num {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--color-accent);
    line-height: 1;
  }

  .concept-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  /* ── Waitlist ──────────────────────────────────────────────── */
  .waitlist {
    padding-block: var(--sp-32);
    background-color: var(--color-bg);
    text-align: center;
  }

  .waitlist__heading {
    font-size: var(--text-hero);
    font-style: italic;
    margin-block-end: var(--sp-4);
  }

  .waitlist__sub {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    max-inline-size: 44ch;
    margin-inline: auto;
    margin-block-end: var(--sp-12);
    line-height: var(--leading-snug);
  }

  .waitlist__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);
  }

  .waitlist__row {
    display: flex;
    inline-size: min(480px, 100%);
    outline: 1px solid var(--color-border);

    @media (width < 520px) {
      flex-direction: column;
      outline: none;
      gap: var(--sp-3);
    }
  }

  .waitlist__input {
    flex: 1;
    min-inline-size: 0;     /* prevents flex overflow */
    padding-block: var(--sp-4);
    padding-inline: var(--sp-5);
    border: none;
    background-color: var(--palette-white);
    font-size: var(--text-sm);
    font-weight: 300;
    color: var(--color-text);
    outline: none;

    &::placeholder {
      color: var(--color-text-muted);
    }

    &:focus {
      box-shadow: inset 0 0 0 1px var(--color-accent);
    }

    @media (width < 520px) {
      outline: 1px solid var(--color-border);
      inline-size: 100%;

      &:focus {
        outline-color: var(--color-accent);
      }
    }
  }

  .waitlist__note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);

    & a {
      color: var(--color-accent);
      font-weight: 400;
    }
  }

  /* ── Site Footer ───────────────────────────────────────────── */
  .site-footer {
    padding-block: var(--sp-8);
    border-block-start: 1px solid var(--color-border);
  }

  .footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);

    @media (width < 480px) {
      flex-direction: column;
      text-align: center;
    }
  }

  .footer__copy,
  .footer__link {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  .footer__link {
    text-decoration: underline;
    text-decoration-color: var(--color-border);

    &:hover {
      text-decoration-color: var(--color-text-muted);
      opacity: 1;
    }
  }
}