/* ==========================================================================
   DESIGN TOKENS — العامر للشقق (Al-Amer Apartments)
   Exact palette, typography, spacing, and semantic tokens for Light & Dark modes
   ========================================================================== */

:root {
  /* Primitive Brand Colors */
  --color-deep-green: #0A3B25;     /* Deep Bluish Green — primary text / dark surfaces */
  --color-moderate-green: #2A6151; /* Moderate Green — secondary text / accents */
  --color-laurel-green: #B2B7AA;   /* Laurel Green — muted/borders in dark mode */
  --color-light-cream: #FCF7F0;    /* Light Cream — light-mode background */
  --color-tuscan-gold: #D8C2A4;    /* Tuscan Gold — accent, prices, highlights, hovers */

  /* Functional Tints & Transparencies */
  --color-tuscan-gold-light: rgba(216, 194, 164, 0.15);
  --color-tuscan-gold-hover: #c9b08f;
  --color-laurel-translucent: rgba(178, 183, 170, 0.35);
  --color-deep-green-darker: #061e13;
  --color-deep-green-surface: #0e3725;

  /* Typography Families */
  --font-arabic-heading: 'Aref Ruqaa', serif;
  --font-english-heading: 'Cormorant Garamond', Georgia, serif;
  --font-numerals: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type Scale */
  --font-size-xs: 0.8125rem;    /* 13px */
  --font-size-sm: 0.9375rem;    /* 15px */
  --font-size-base: 1.0625rem;  /* 17px */
  --font-size-lg: 1.25rem;      /* 20px */
  --font-size-xl: 1.5rem;       /* 24px */
  --font-size-2xl: 2rem;        /* 32px */
  --font-size-3xl: 2.5rem;      /* 40px */
  --font-size-4xl: 3.25rem;     /* 52px */

  --line-height-tight: 1.2;
  --line-height-normal: 1.55;
  --line-height-relaxed: 1.75;

  /* Spacing Scale */
  --space-2xs: 0.25rem;   /* 4px */
  --space-xs: 0.5rem;     /* 8px */
  --space-sm: 0.75rem;    /* 12px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4.5rem;    /* 72px */
  --space-4xl: 6rem;      /* 96px */

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout Container */
  --container-max-width: 1180px;
  --container-padding: clamp(1rem, 4vw, 2rem);
}

/* ==========================================================================
   LIGHT MODE (Default)
   Simple, low-contrast-but-readable background (#FCF7F0) with deep green text
   (#0A3B25) — no heavy shadows, no gradients, keep it flat and calm.
   ========================================================================== */
:root,
html[data-theme="light"] {
  --bg-page: var(--color-light-cream);
  --bg-surface: #FFFFFF;
  --bg-surface-subtle: #F6EFE5;
  --bg-surface-elevated: #FFFFFF;
  --bg-accent-subtle: rgba(216, 194, 164, 0.22);
  --bg-interactive-hover: rgba(10, 59, 37, 0.05);

  --text-primary: var(--color-deep-green);
  --text-secondary: var(--color-moderate-green);
  --text-muted: #567267;
  --text-inverse: var(--color-light-cream);

  --border-color: rgba(42, 97, 81, 0.16);
  --border-subtle: rgba(42, 97, 81, 0.08);
  --border-strong: var(--color-moderate-green);

  --accent-color: var(--color-tuscan-gold);
  --accent-hover: var(--color-tuscan-gold-hover);
  --accent-text: var(--color-deep-green);

  --cta-bg: var(--color-deep-green);
  --cta-text: var(--color-light-cream);
  --cta-border: var(--color-deep-green);
  --cta-hover-bg: var(--color-moderate-green);

  --card-border: 1px solid var(--border-color);
  --card-shadow: none; /* strictly flat as requested */

  --focus-ring: 2px solid var(--color-moderate-green);
  --focus-ring-offset: 2px;
}

/* ==========================================================================
   DARK MODE
   Simple bordered style rather than shadows — dark green/near-black background,
   cream text, thin 1px borders (using laurel green or translucent cream) to
   separate cards/sections instead of drop shadows.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: var(--color-deep-green-darker);
    --bg-surface: var(--color-deep-green);
    --bg-surface-subtle: var(--color-deep-green-surface);
    --bg-surface-elevated: #0f3f2a;
    --bg-accent-subtle: rgba(216, 194, 164, 0.12);
    --bg-interactive-hover: rgba(178, 183, 170, 0.1);

    --text-primary: var(--color-light-cream);
    --text-secondary: var(--color-laurel-green);
    --text-muted: #959c8e;
    --text-inverse: var(--color-deep-green);

    --border-color: var(--color-laurel-translucent);
    --border-subtle: rgba(178, 183, 170, 0.2);
    --border-strong: var(--color-laurel-green);

    --accent-color: var(--color-tuscan-gold);
    --accent-hover: #e5d4be;
    --accent-text: var(--color-deep-green);

    --cta-bg: var(--color-tuscan-gold);
    --cta-text: var(--color-deep-green);
    --cta-border: var(--color-tuscan-gold);
    --cta-hover-bg: #e5d4be;

    --card-border: 1px solid var(--border-color);
    --card-shadow: none; /* strictly no shadows, borders only */

    --focus-ring: 2px solid var(--color-tuscan-gold);
    --focus-ring-offset: 2px;
  }
}

html[data-theme="dark"] {
  --bg-page: var(--color-deep-green-darker);
  --bg-surface: var(--color-deep-green);
  --bg-surface-subtle: var(--color-deep-green-surface);
  --bg-surface-elevated: #0f3f2a;
  --bg-accent-subtle: rgba(216, 194, 164, 0.12);
  --bg-interactive-hover: rgba(178, 183, 170, 0.1);

  --text-primary: var(--color-light-cream);
  --text-secondary: var(--color-laurel-green);
  --text-muted: #959c8e;
  --text-inverse: var(--color-deep-green);

  --border-color: var(--color-laurel-translucent);
  --border-subtle: rgba(178, 183, 170, 0.2);
  --border-strong: var(--color-laurel-green);

  --accent-color: var(--color-tuscan-gold);
  --accent-hover: #e5d4be;
  --accent-text: var(--color-deep-green);

  --cta-bg: var(--color-tuscan-gold);
  --cta-text: var(--color-deep-green);
  --cta-border: var(--color-tuscan-gold);
  --cta-hover-bg: #e5d4be;

  --card-border: 1px solid var(--border-color);
  --card-shadow: none; /* strictly no shadows, borders only */

  --focus-ring: 2px solid var(--color-tuscan-gold);
  --focus-ring-offset: 2px;
}