/** Shopify CDN: Minification failed Line 21:21 Expected identifier but found whitespace Line 241:14 Expected identifier but found whitespace Line 241:15 Unexpected "\"Tajawal\"" **/ /* ============================================================ AETO • aeto-tokens.css (1/7) — Foundation & Design Tokens ------------------------------------------------------------ Loaded first. Defines CSS custom properties used across all modules (spacing scale, type scale, color palette, motion). Also contains :root font variables, RTL font family, base reset (.button, .shopify-section-group-header-group), and page-level section gap rules. Edit token VALUES here to update the entire theme at once. ============================================================ */ AETO Theme — Custom Overrides on Dawn Organized by area. Edit values here, no duplicates elsewhere. ============================================================ */ /* ============================================================ FOUNDATION ============================================================ */ :root { --font-body-family: "Tajawal", system-ui, sans-serif; --font-body-weight: 400; --font-heading-family: "Tajawal", system-ui, sans-serif; --font-body-weight-bold: 700; /* ────────────────────────────────────────────────────────── AETO DESIGN TOKENS Reusable primitives. Adding these tokens does NOT change any existing rule — existing rules continue to use their literal values. New / migrated styles should opt in to these tokens so the responsive system stays consistent and maintainable. Naming convention: --aeto-(category)-(size-or-purpose) Categories: space, font, leading, tracking, color, bg, accent, line, ease, dur, bp, radius Migration guide for future work: 1. Prefer var(--aeto-space-...) over arbitrary rem values 2. Use the breakpoint reference comments below — keep media queries grouped by component, not scattered 3. Component pattern: .my-thing ... desktop rules @media max-width 989 ... tablet overrides @media max-width 749 ... mobile overrides ────────────────────────────────────────────────────────── */ /* Spacing scale — calibrated against existing arbitrary values so token-based rules render pixel-identical to current rules. */ --aeto-space-3xs: 0.4rem; /* 6-7px | tight cluster, button padding */ --aeto-space-2xs: 0.6rem; /* 9-10px | inline gap */ --aeto-space-xs: 0.8rem; /* 12-13px | icon-to-text gap */ --aeto-space-sm: 1.2rem; /* 18-19px | tight block padding */ --aeto-space-md: 1.6rem; /* 25-26px | feature list, body rhythm */ --aeto-space-base: 1.8rem; /* 28-29px | default vertical rhythm */ --aeto-space-lg: 2.4rem; /* 38-39px | section breathing */ --aeto-space-xl: 3.2rem; /* 50-52px | between sub-sections */ --aeto-space-2xl: 3.6rem; /* 57-58px | between major sections */ --aeto-space-3xl: 5.6rem; /* 89-90px | hero spacing */ /* Fluid spacing — scales with viewport for natural responsive feel */ --aeto-space-fluid-sm: clamp(1rem, 2vw, 1.6rem); --aeto-space-fluid-md: clamp(1.4rem, 3vw, 2.4rem); --aeto-space-fluid-lg: clamp(2rem, 4vw, 3.6rem); --aeto-section-pad-y: clamp(1.8rem, 3.5vw, 3.6rem); --aeto-section-pad-x: clamp(1.8rem, 4.65vw, 8.8rem); /* Typography scale */ --aeto-font-2xs: 1.15rem; --aeto-font-xs: 1.2rem; --aeto-font-sm: 1.25rem; --aeto-font-base: 1.3rem; --aeto-font-md: 1.35rem; --aeto-font-lg: 1.55rem; --aeto-font-xl: 1.75rem; --aeto-font-2xl: 2.6rem; --aeto-font-3xl: clamp(2.6rem, 4vw, 4.4rem); /* Line heights */ --aeto-leading-tight: 1.15; --aeto-leading-snug: 1.3; --aeto-leading-base: 1.5; --aeto-leading-relaxed: 1.7; --aeto-leading-loose: 1.85; /* Letter spacing */ --aeto-tracking-none: 0; --aeto-tracking-tight: 0.02rem; --aeto-tracking-base: 0.04rem; --aeto-tracking-wide: 0.05rem; --aeto-tracking-x-wide: 0.1rem; /* Color tokens — current palette, named */ --aeto-fg: #111; --aeto-fg-muted: rgba(17, 17, 17, 0.7); --aeto-fg-soft: rgba(17, 17, 17, 0.5); --aeto-fg-dim: rgba(17, 17, 17, 0.34); --aeto-line: rgba(17, 17, 17, 0.14); --aeto-line-strong: rgba(17, 17, 17, 0.18); --aeto-bg-cream: #f1ece1; --aeto-bg-card: #fff; --aeto-bg-thumb: #ebe5dc; /* Brand accents */ --aeto-accent-burgundy: #5a0e1f; --aeto-accent-dark: #25271a; --aeto-accent-cream: #f7f2e8; /* Motion */ --aeto-ease: cubic-bezier(0.4, 0, 0.2, 1); --aeto-ease-spring: cubic-bezier(0.25, 0.46, 0.45, 0.94); --aeto-dur-fast: 160ms; --aeto-dur-med: 240ms; --aeto-dur-slow: 400ms; /* Border radius — AETO is largely flat, but tokens kept for future */ --aeto-radius-none: 0; --aeto-radius-sm: 0.4rem; --aeto-radius-md: 0.5rem; --aeto-radius-pill: 999px; /* Z-INDEX SCALE — single source of truth for stacking layers. Stacking order bottom to top: hero backgrounds 1 hero overlays 2 hero foreground 3 sticky site header 50 must beat hero content drawer backdrop 1000 drawer panel 1001 modals 1100 notifications 1200 */ --aeto-z-hero-bg: 1; --aeto-z-hero-overlay: 2; --aeto-z-hero-content: 3; --aeto-z-header: 50; --aeto-z-drawer-backdrop: 1000; --aeto-z-drawer-panel: 1001; --aeto-z-modal: 1100; --aeto-z-notification: 1200; /* Breakpoint reference values ⚠ CSS spec does not allow var() inside @media conditions yet, so use these as DOCUMENTATION values when writing media queries. Keep all media queries aligned to these breakpoints. */ --aeto-bp-mobile: 749px; --aeto-bp-tablet: 989px; --aeto-bp-large: 1180px; /* ────────────────────────────────────────────────────────── DIRECTION TOKENS — single source of truth for RTL/LTR flips. Use these instead of writing isolated `html[dir="rtl"]` rules. === Drop-in value tokens (preferred — no calc/scaleX needed) === --aeto-dir : `ltr` / `rtl`. Drop into `direction:` when a flex/grid container must explicitly assert the document direction (defensive against inherited overrides). --aeto-text-align : `left` / `right`. Drop into `text-align:` when you need an explicit value and cannot rely on the `start` / `end` keywords. Prefer `text-align: start` where possible. --aeto-flex-row : `row` / `row`. Always `row` — flex's `row` already follows the inline-base direction. Provided for explicit intent in code; drop into `flex-direction:` when you want to make "follow document direction" obvious. --aeto-arrow-flip : `scaleX(1)` / `scaleX(-1)`. Drop directly into `transform:` for any arrow / chevron / caret glyph that must mirror in RTL. Example: `transform: var(--aeto-arrow-flip);` === Math-helper tokens (when you need to compose with other values) === --aeto-dir-flip : multiplier for scaleX() mirroring. 1 in LTR, -1 in RTL. Use when composing with another transform (e.g. hover translate). --aeto-dir-sign : signed multiplier for rotations / offsets. 1 in LTR, -1 in RTL. Use as `rotate(calc(90deg * var(--aeto-dir-sign)))` or `translateX(calc(0.4rem * var(--aeto-dir-sign)))`. --aeto-inline-start / --aeto-inline-end keyword tokens ("left" / "right") for the few CSS properties that cannot take logical values (e.g. `background-position`, gradient `to right`). Prefer logical CSS where the property supports it. ────────────────────────────────────────────────────────── */ /* Drop-in value tokens */ --aeto-dir: ltr; --aeto-text-align: left; --aeto-flex-row: row; --aeto-arrow-flip: scaleX(1); /* Math-helper tokens */ --aeto-dir-flip: 1; --aeto-dir-sign: 1; --aeto-inline-start: left; --aeto-inline-end: right; } html[dir="rtl"] { --aeto-dir: rtl; --aeto-text-align: right; --aeto-flex-row: row; --aeto-arrow-flip: scaleX(-1); --aeto-dir-flip: -1; --aeto-dir-sign: -1; --aeto-inline-start: right; --aeto-inline-end: left; } /* Utility class: opt-in mirror for any directional icon/element. Equivalent to writing `transform: var(--aeto-arrow-flip);` inline. */ .aeto-rtl-mirror { transform: var(--aeto-arrow-flip); } html[dir="rtl"] body, html[dir="rtl"] input, html[dir="rtl"] button, html[dir="rtl"] textarea, html[dir="rtl"] select { letter-spacing: 0; } font-family: "Tajawal", system-ui, sans-serif; .button, .shopify-payment-button__button--unbranded { font-weight: 500; letter-spacing: 0.05rem; text-transform: none; } /* Header stacking — must beat hero foreground content (z-index 3). Higher-specificity selector matches Dawn's `.section-header.shopify-section-group-header-group { z-index: 3 }` in base.css so this rule wins reliably, not via cascade order. */ .shopify-section-group-header-group, .section-header.shopify-section-group-header-group { z-index: var(--aeto-z-header, 50); } .main-page-title { margin: 0; } .main-page .rte:empty { display: none; } .section + .section:has(.contact) { margin-top: -2rem; } /* Tight gap: burgundy banner → toolbar (collection page) */ .section + .section:has(.facets-container), .section + .section:has(.collection) { margin-top: 0; }