/*
Theme Name: ailikee
Theme URI: https://ailikee.com
Author: Kailee
Description: Custom theme for ailikee — interior sourcing studio, Foshan.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: ailikee
*/

/* ==========================================================================
   Design tokens — mirrors ailikee-design-system-en.md. Every value here
   maps 1:1 to a {token.ref} in that document; see the token-mapping table
   in "AI Development Guidelines" at the bottom of that file before adding
   or changing anything here.
   ========================================================================== */
:root {
  /* Brand & accent — {colors.primary*}, {colors.accent-oxblood} */
  --gold:            #9C7A44; /* primary */
  --gold-hover:      #7E6236; /* primary-hover */
  --gold-active:     #665032; /* primary-active */
  --gold-disabled:   #D9CFB9; /* primary-disabled */
  --wine:            #5A2A3F; /* accent-oxblood */

  /* Surface — {colors.canvas} .. {colors.hairline} */
  --bg:              #EDEAE3; /* canvas */
  --paper:           #FBFAF7; /* surface-card */
  --surface-soft:    #E3DFD5; /* surface-soft */
  --forest:          #1F2E24; /* surface-dark */
  --forest-2:        #2A3B2F; /* surface-dark-elevated */
  --line:            #DAD4C7; /* hairline */
  --line-soft:       #B8B0A3; /* not in doc — lighter hairline used for connector lines */
  --forest-line:      rgba(199,204,197,0.15);
  --footer-text:      #8A9A8E; /* footer body text, social icon fill, link default — new footer/header design system */
  --footer-muted:     #5E6E62; /* footer column headings, contact icons, bottom bar, contact note */
  --footer-border:    #3A4A3E; /* social icon border default */
  --footer-border-subtle: #2E3F33; /* bottom bar top border */
  --brass-tint:       rgba(156,122,68,.1); /* social icon hover background */

  /* Text — {colors.ink} .. {colors.on-dark-soft} */
  --ink:             #221E1A; /* ink */
  --ink-soft:        #46403A; /* body */
  --muted:           #7A736A; /* muted */
  --on-primary:      #FFFFFF; /* on-primary */
  --forest-ink:      #A9B0A3; /* on-dark-soft */

  /* Semantic — {colors.success} .. {colors.error} */
  --success:         #5C7A4E;
  --warning:         #C9992E;
  --error:           #A94438;

  /* Spacing — {spacing.xs} .. {spacing.section}, 8px base unit */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 88px;

  /* Radii — {rounded.sm} .. {rounded.lg} */
  --radius-sm: 2px; /* tags, badges */
  --radius-md: 3px; /* buttons, inputs */
  --radius-lg: 4px; /* cards, swatches */

  /* Motion — the system's one easing curve, used for every transition */
  --ease: cubic-bezier(.2,.7,.2,1);

  /* Fonts */
  --font-display: 'Newsreader', serif;
  --font-body:    'Archivo', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace; /* product codes / SKUs — {typography.code} */
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:'Archivo',sans-serif; }

.pinstripe { height:4px; background: repeating-linear-gradient(90deg, var(--gold) 0, var(--gold) 1px, transparent 1px, transparent 9px); }

/* ==========================================================================
   Nav
   ========================================================================== */
.nav-wrap { position:sticky; top:0; z-index:90; background:var(--bg); }
.nav { display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:0 auto; padding:18px 48px; background:var(--bg); border-bottom:1px solid var(--line); flex-wrap:wrap; gap:16px; }
.logo { display:flex; align-items:center; gap:10px; flex-shrink:0; font-family:'Newsreader',serif; font-style:italic; font-weight:500; font-size:21px; text-decoration:none; color:var(--ink); }
.logo-mark { width:15px; height:19px; background:var(--gold); clip-path: polygon(50% 0%, 100% 18%, 100% 62%, 50% 100%, 0% 62%, 0% 18%); flex-shrink:0; }
.logo-image { display:block; height:28px; width:auto; max-width:180px; object-fit:contain; }
.nav-links { display:flex; gap:28px; align-items:center; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.nav-links li { font-size:12px; letter-spacing:.07em; font-weight:500; color:var(--ink-soft); text-transform:uppercase; position:relative; }
.nav-links li::after { content:''; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:var(--gold); transition:width .4s ease; }
.nav-links li:hover::after { width:100%; }
.nav-links a { color:inherit; text-decoration:none; }
.nav-links li a:hover { color:var(--ink); }
.nav-links li a.active { color:var(--gold); }
.nav-links li a.active::after { content:''; position:absolute; left:0; bottom:-5px; width:100%; height:1px; background:var(--gold); }
footer .logo { text-decoration:none; }
.nav-cta { background:var(--gold); color:#fff; padding:10px 20px; border-radius:var(--radius-md); font-size:12px; letter-spacing:.04em; font-weight:500; white-space:nowrap; flex-shrink:0; cursor:pointer; transition:transform .3s var(--ease), background-color .3s var(--ease); display:inline-block; text-decoration:none; }
.nav-cta:hover { transform:scale(1.045); background-color:var(--gold-hover); }
.nav-cta:active { background-color:var(--gold-active); }

.hamburger { display:none; background:none; border:none; cursor:pointer; padding:8px; }
.hamburger svg { width:22px; height:22px; stroke:var(--ink); stroke-width:2; fill:none; }
@media (max-width:860px){
  .nav { padding:16px 24px; }
  .hamburger { display:block; }
  .nav-links { display:none; position:absolute; top:100%; left:0; right:0; background:var(--bg); flex-direction:column; padding:24px 32px 28px; border-bottom:1px solid var(--line); gap:18px; z-index:91; }
  .nav-links.open { display:flex; }
  .nav-cta { display:none; }
}

/* ==========================================================================
   Shared type / section helpers
   ========================================================================== */
.eyebrow { font-size:12px; letter-spacing:.06em; font-weight:500; color:var(--wine); text-transform:uppercase; margin:0 0 16px; }

/* button-secondary — {component.button-secondary}, not yet used in markup
   but kept here so it's available without inventing an off-system style */
.btn-secondary { display:inline-block; background:var(--bg); color:var(--ink); border:1px solid var(--line); padding:10px 18px; border-radius:var(--radius-md); font-size:14px; font-weight:500; text-decoration:none; cursor:pointer; transition:border-color .25s ease; }
.btn-secondary:hover { border-color:var(--ink); }

/* category-tag — {component.category-tag} */
.category-tag { display:inline-block; font-size:11.5px; font-weight:500; color:var(--ink-soft); border:1px solid var(--line); padding:5px 10px; border-radius:var(--radius-sm); }

/* status-badge — {component.status-badge}, outline-only, no fill */
.status-badge { display:inline-block; font-size:11px; font-weight:500; padding:4px 10px; border-radius:var(--radius-sm); border:1px solid; background:transparent; }
.badge-success { color:var(--success); border-color:var(--success); }
.badge-warning { color:var(--warning); border-color:var(--warning); }
.badge-error   { color:var(--error); border-color:var(--error); }

code, .font-mono { font-family:var(--font-mono); font-size:13px; }

.double-rule { max-width:1160px; margin:56px auto 0; padding:0 48px; }
.double-rule .thin { height:1px; background:var(--line); margin-bottom:4px; }
.double-rule .thick { height:2px; width:0; background:var(--ink); transition: width 1s cubic-bezier(.2,.7,.2,1) .3s; }
.double-rule.in-view .thick { width:64px; }

/* ==========================================================================
   Quote CTA (dark banner, reused on several pages)
   ========================================================================== */
.quote-cta { background:var(--forest); color:var(--bg); text-align:center; padding:80px 48px; }
.quote-cta h2 { font-family:'Newsreader',serif; font-weight:500; font-size:30px; margin:0 0 14px; letter-spacing:-.01em; }
.quote-cta p { color:var(--forest-ink); font-size:14.5px; margin:0 0 30px; }
.quote-cta .btn { display:inline-block; background:var(--bg); color:var(--forest); padding:13px 28px; border-radius:var(--radius-md); font-size:14px; font-weight:500; cursor:pointer; text-decoration:none; transition:transform .3s var(--ease), background-color .3s var(--ease); }
.quote-cta .btn:hover { transform:scale(1.045); background-color:#fff; }
/* Light variant used on About / How it works */
.quote-cta.light { background:transparent; color:var(--ink); border-top:1px solid var(--line); }
.quote-cta.light p { color:var(--muted); }
.quote-cta.light .btn { background:var(--gold); color:#fff; }
.quote-cta.light .btn:hover { background-color:var(--gold-hover); }

/* ==========================================================================
   Footer
   ========================================================================== */
/* Footer — brand / nav / contact 3-column layout. Bookended by the same
   .pinstripe used at the top of the page. */
footer { background:var(--forest); color:var(--footer-text); }
.footer-main { max-width:1200px; margin:0 auto; padding:56px 48px 48px; display:grid; grid-template-columns:1.6fr 1fr 1.2fr; gap:48px; }

.footer-brand .logo { color:var(--bg); margin-bottom:16px; }
.footer-brand-desc { font-size:13px; line-height:1.65; color:var(--footer-text); max-width:280px; margin:0 0 24px; }

.social-row { display:flex; gap:16px; align-items:center; }
.social-icon { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:1px solid var(--footer-border); border-radius:var(--radius-md); background:transparent; transition:border-color .3s ease, background-color .3s ease; }
.social-icon svg { width:15px; height:15px; fill:var(--footer-text); transition:fill .3s ease; }
.social-icon:hover { border-color:var(--gold); background:var(--brass-tint); }
.social-icon:hover svg { fill:var(--bg); }

.footer-nav h4, .footer-contact h4 { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--footer-muted); font-weight:500; margin:0 0 20px; }
.footer-nav ul { list-style:none; margin:0; padding:0; }
.footer-nav li { margin-bottom:12px; }
.footer-nav ul li a { font-size:13px; color:var(--footer-text); text-decoration:none; transition:color .25s ease; }
.footer-nav ul li a:hover { color:var(--footer-text-hover,var(--bg)); }

.contact-item { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.contact-icon { width:16px; height:16px; flex-shrink:0; margin-top:2px; }
.contact-icon svg { width:100%; height:100%; fill:none; stroke:var(--footer-muted); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.contact-item span, .contact-item a { font-size:13px; color:var(--footer-text); line-height:1.5; text-decoration:none; transition:color .25s ease; }
.contact-item a:hover { color:var(--bg); }
.contact-note { font-size:11.5px; color:var(--footer-muted); margin-top:20px; line-height:1.55; }

.footer-bottom { max-width:1200px; margin:0 auto; padding:20px 48px; border-top:1px solid var(--footer-border-subtle); display:flex; align-items:center; justify-content:space-between; font-size:11.5px; color:var(--footer-muted); flex-wrap:wrap; gap:8px; }
.footer-bottom-right { display:flex; gap:20px; }
.footer-bottom-right a { color:var(--footer-muted); text-decoration:none; transition:color .25s ease; }
.footer-bottom-right a:hover { color:var(--footer-text); }

@media (max-width:860px){
  .footer-main { grid-template-columns:1fr 1fr; padding:40px 24px 36px; gap:36px; }
  .footer-brand { grid-column:1 / -1; }
  .footer-bottom { padding:16px 24px; flex-direction:column; text-align:center; }
}
@media (max-width:540px){
  .footer-main { grid-template-columns:1fr; gap:32px; }
  .footer-brand { grid-column:auto; }
}

.social-row { display:flex; gap:14px; margin-top:16px; }
.social-icon { width:20px; height:20px; opacity:.6; transition:opacity .25s ease; }
.social-icon:hover { opacity:1; }
.social-icon svg { width:100%; height:100%; fill:var(--forest-ink); }

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes fadeUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
.fade-up { opacity:0; animation:fadeUp .9s var(--ease) forwards; }
.reveal { opacity:0; transform:translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view { opacity:1; transform:translateY(0); }

/* Known Gap closed: none of the motion in this system checked
   prefers-reduced-motion. Users who ask for reduced motion get content
   at full opacity immediately, no fade/drift/scale. */
@media (prefers-reduced-motion: reduce) {
  .fade-up, .reveal { opacity:1 !important; transform:none !important; animation:none !important; transition:none !important; }
  .double-rule .thick { transition:none !important; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   Real <img> helpers (mockups used CSS-gradient placeholders; real theme
   swaps them for <img>, this keeps the same frame/crop treatment)
   ========================================================================== */
img { max-width:100%; display:block; }
.img-cover { width:100%; height:100%; object-fit:cover; display:block; }