/*
Theme Name: Aqiq Theme
Theme URI: https://aqiqsaffron.com
Author: Aqiq Saffron
Description: Custom, modern, lightweight WordPress theme for Aqiq Saffron. A structural port of the static /html-site design — same color palette, typography, spacing scale, and responsive grid rules, driven by CSS custom properties and paired with theme.json for native block editing.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.0.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aqiq-theme
*/

/* ============================================================
   FONTS
   Ported 1:1 from html-site: Fraunces (display/serif) + Inter (sans).
   Loaded here so front-end and block editor share identical faces.
   Also enqueued via functions.php for correct WP asset handling.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   AQIQ SAFFRON — Design System v2  (ported from html-site/styles.css)
   Modern · Professional · B2B Credible
   These tokens are the single source of visual truth. They mirror the
   theme.json settings exactly so static templates and Gutenberg blocks
   render identically.
   ============================================================ */
:root{
  /* Backgrounds */
  --bg:           #F8F6F9;
  --surface:      #FFFFFF;
  --surface-2:    #F2EDF5;
  --surface-3:    #E7DEED;
  --dark:         #2A2130;
  --dark-2:       #362A3D;
  --dark-3:       #473750;

  /* Text */
  --ink:          #2C2431;
  --ink-2:        #3A3041;
  --ink-soft:     #5A4C65;
  --ink-mute:     #83748F;
  --ink-faint:    #A99CB2;
  --on-dark:      #F8F5FA;
  --on-dark-soft: #D8CFDE;
  --on-dark-mute: #B5A8C0;
  --on-dark-faint:#8F7F9D;

  /* Accent — saffron orange */
  --accent:       #E55A26;
  --accent-deep:  #BF431A;
  --accent-soft:  #F8DCCF;
  --accent-bg:    #FFF4EE;

  /* Borders */
  --line:         #E3DAE9;
  --line-soft:    #F2ECF5;
  --line-strong:  #CFC2D9;
  --line-dark:    rgba(255,255,255,0.12);
  --line-dark-2:  rgba(255,255,255,0.2);

  /* Type families */
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  /* Fluid spacing */
  --gutter:     clamp(20px, 5vw, 56px);
  --section:    clamp(72px, 10vw, 128px);
  --section-sm: clamp(48px, 7vw, 88px);

  /* Container */
  --content-width: 1280px;

  /* Easing curves */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* Radius */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(9,9,11,0.04), 0 1px 3px rgba(9,9,11,0.06);
  --shadow-md: 0 4px 6px -1px rgba(9,9,11,0.06), 0 2px 4px -2px rgba(9,9,11,0.04);
  --shadow-lg: 0 10px 24px -6px rgba(9,9,11,0.10), 0 4px 8px -4px rgba(9,9,11,0.06);
  --shadow-xl: 0 24px 48px -16px rgba(9,9,11,0.16);
}

/* ============================================================
   RESET & BASE  (identical to html-site)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

body{
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  overflow-x: hidden;
}

/* ============================================================
   TYPOGRAPHIC HIERARCHY  (identical to html-site)
   ============================================================ */
h1,h2,h3,h4,h5{
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.1;
  color: var(--ink);
}
h1{ font-size: clamp(40px, 6vw, 84px); letter-spacing:-0.02em; font-weight:600 }
h2{ font-size: clamp(32px, 4.5vw, 56px); letter-spacing:-0.016em; font-weight:600 }
h3{ font-size: clamp(28px, 3.5vw, 40px) }

.eyebrow{
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
}

a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}

/* ============================================================
   LAYOUT CONTAINER  (identical to html-site .wrap)
   ============================================================ */
.wrap{
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}
.section{ padding: var(--section) 0; position: relative }

/* Constrained-layout parity for block content: mirror .wrap width + gutter
   so Gutenberg pages line up with ported static templates. */
.wp-site-blocks,
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
  max-width: var(--content-width);
}

/* ============================================================
   RESPONSIVE BREAKPOINTS  (ported verbatim from html-site)
   Primary: 1024px (tablet) · 680px (mobile) · 600px (article minor)
   Grid/layout collapse rules live in the section-specific stylesheet
   ported alongside the page templates; the two breakpoints below are
   the theme-wide chrome rules.
   ============================================================ */
@media (max-width: 680px){
  h1{ font-size: clamp(40px, 6vw, 84px) } /* clamp already handles down-scale */
}