/*
Theme Name:        HATAN
Theme URI:         https://hatan.sa
Author:            HATAN Creative
Author URI:        https://hatan.sa
Description:       A premium Saudi specialty coffee brand theme. Cinematic one-scene editorial identity with full WooCommerce support, bilingual Arabic/English content, and RTL/LTR direction handling.
Version:           1.0.0
Requires at least: 6.0
Tested up to:      6.7
Requires PHP:      8.0
License:           Proprietary
License URI:       https://hatan.sa/license
Text Domain:       hatan
Tags:              woocommerce, rtl-language-support, arabic, coffee, luxury, editorial, bilingual
*/

/* ============================================================
   HATAN Design System — CSS Custom Properties (style.css)

   IMPORTANT: The authoritative token set lives in assets/css/scene.css.
   scene.css is loaded after this file, so its :root declarations take
   precedence for any variable defined in both files.

   This block defines:
   a) Unique tokens not present in scene.css (kept here as the single source)
   b) Aliases for convenience (matching scene.css values)

   Variables removed from here because scene.css overrides them with a
   different value (scene.css wins):
     --hatan-glass-bg         (scene.css: hsla dark overlay)
     --hatan-glass-border     (scene.css: rgba 0.06 vs 0.08 here)
     --hatan-text-primary/secondary/tertiary  (scene.css: HSL-based values)
     --hatan-font-arabic-sans (scene.css: 'Noto Sans Arabic')
     --hatan-space-md/lg      (scene.css: 1.25rem/2rem vs 1.5rem/3rem here)
   ============================================================ */

:root {
    /* Background — unique to style.css */
    --hatan-bg:               #1a1410;
    --hatan-bg-secondary:     #221c16;

    /* Glass panels — unique to style.css */
    --hatan-glass-bg-hover:   rgba(255, 255, 255, 0.07);
    --hatan-glass-blur:       16px;
    --hatan-glass-radius:     2px;

    /* Accent colours — unique to style.css */
    --hatan-accent:           rgba(210, 175, 130, 0.82);
    --hatan-accent-subtle:    rgba(210, 175, 130, 0.36);

    /* Typography — families (unique to style.css; scene.css uses --hatan-font-sans/serif/ar-*) */
    --hatan-font-display:     'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    --hatan-font-body:        'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --hatan-font-arabic:      'Amiri', 'Traditional Arabic', serif;

    /* Spacing — unique scale values not in scene.css */
    --hatan-space-xs:   0.375rem;
    --hatan-space-sm:   0.75rem;
    --hatan-space-xl:   5rem;
    --hatan-space-2xl:  9rem;

    /* Motion — unique to style.css */
    --hatan-ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --hatan-duration:   0.6s;
    --hatan-duration-slow: 1.2s;

    /* Layout — unique to style.css */
    --hatan-max-width:  1280px;
    --hatan-header-h:   72px;
}

/* ============================================================
   Base Reset
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    background-color: var(--hatan-bg);
    color: var(--hatan-text-primary);
    font-family: var(--hatan-font-body);
    font-size: 1rem;
    line-height: 1.65;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Arabic direction */
body.hatan-lang-ar,
[dir="rtl"] body {
    font-family: var(--hatan-font-arabic-sans);
}

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

a {
    color: inherit;
    text-decoration: none;
}

a:focus-visible {
    outline: 2px solid var(--hatan-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

ul,
ol {
    list-style: none;
}

/* Screen reader only */
.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;
}

/* ============================================================
   Skip link
   ============================================================ */

.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: var(--hatan-accent);
    color: var(--hatan-bg);
    font-size: 0.875rem;
    border-radius: 2px;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 1rem;
}