/* SPDX-License-Identifier: GPL-3.0-only
 * Copyright (c) 2026 AethelisDEV / Aeon Platform. All rights reserved.
 *
 * Design tokens — the single source of truth for colour, type, space, radius, depth and motion.
 *
 * Everything else in the stylesheet consumes these variables and defines no raw colour or size of
 * its own. That is what keeps light and dark mode, RTL and future brand changes to a single file.
 *
 * BRAND DIRECTION (2026 refresh)
 * -----------------------------
 * A marketplace look rather than an operating-system look: a white canvas broken up by wide
 * periwinkle bands and deep navy panels, one hot orange used only for action, square-ish corners
 * and heavy Manrope headlines. The previous Apple-derived palette (system blue, pill buttons,
 * frosted chrome) has been retired wholesale.
 *
 * Colour-scheme strategy (three states, as the platform actually behaves):
 *   1. `:root`                                    → the complete light palette, always defined.
 *   2. `@media (prefers-color-scheme: dark)`      → dark values, guarded by
 *      `:root:not([data-theme="light"])`             so an explicit "light" choice still wins.
 *   3. `:root[data-theme="dark"]`                 → dark values again, so the in-page toggle wins
 *                                                    on a light system.
 * No colour is ever defined *only* inside a media query.
 *
 * The navy panels (`--ink*`) and the orange (`--brand*`) are deliberately identical in both
 * schemes: they are brand surfaces, not neutrals, and a dark-mode visitor should still see the
 * same orange call to action a light-mode visitor sees.
 */

:root {
  color-scheme: light dark;

  /* ---------------------------------------------------------------------------------------
   * Typography — Manrope, self-hosted (see base.css for the @font-face block). The Arabic stack
   * is appended because Manrope carries no Arabic glyphs; Arabic text falls through to the
   * platform's own Naskh face and stays correctly shaped.
   * ------------------------------------------------------------------------------------- */
  --font-sans:
    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui,
    Roboto, "Helvetica Neue", Arial, "SF Arabic", "Geeza Pro", "Noto Naskh Arabic",
    "Noto Sans Arabic", sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Type ramp. Sizes are in rem so a visitor's browser zoom keeps working. */
  --text-caption-2: 0.6875rem;  /* 11px */
  --text-caption-1: 0.75rem;    /* 12px */
  --text-footnote: 0.8125rem;   /* 13px */
  --text-subhead: 0.9375rem;    /* 15px */
  --text-body: 1rem;            /* 16px */
  --text-title-3: 1.1875rem;    /* 19px */
  --text-title-2: 1.375rem;     /* 22px */
  --text-title-1: 1.75rem;      /* 28px */
  --text-large-title: 2.125rem; /* 34px */

  /* Fluid display sizes for hero and section headings. */
  --text-display-s: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --text-display-m: clamp(2.125rem, 1.35rem + 3.2vw, 3.25rem);
  --text-display-l: clamp(2.5rem, 1.3rem + 5.2vw, 4.5rem);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --leading-tight: 1.08;
  --leading-snug: 1.22;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;

  /* Headlines are set tight and heavy; body copy sits at zero tracking. */
  --tracking-display: -0.03em;
  --tracking-title: -0.02em;
  --tracking-body: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.08em;

  /* ---------------------------------------------------------------------------------------
   * Space — a 4px base grid. Named by size so components never invent an in-between value.
   * ------------------------------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Section rhythm scales with the viewport so mobile does not waste half a screen on padding. */
  --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);
  --container-max: 1300px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);

  /* ---------------------------------------------------------------------------------------
   * Radius — square-ish. Cards sit at 10px, controls at 6px; the pill is reserved for tabs,
   * chips and avatars, never for a primary button.
   * ------------------------------------------------------------------------------------- */
  --radius-xs: 3px;
  --radius-s: 6px;
  --radius-m: 8px;
  --radius-l: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------------------------
   * Motion — short, decelerating, never bouncy. Every transition uses one of these.
   * ------------------------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;

  /* ---------------------------------------------------------------------------------------
   * Layout constants shared between CSS and JS-free sticky behaviour.
   * ------------------------------------------------------------------------------------- */
  --nav-height: 60px;
  --nav-height-lg: 76px;

  /* =======================================================================================
   * BRAND SURFACES — identical in light and dark. These are paint, not neutrals.
   * ===================================================================================== */

  /* Deep navy, used for the header, the footer, dark feature panels and media overlays. */
  --ink: #1e2532;
  --ink-strong: #151b25;
  --ink-soft: #29313f;
  --ink-raised: #333c4c;
  --ink-line: rgba(255, 255, 255, 0.1);
  --ink-line-strong: rgba(255, 255, 255, 0.18);
  --on-ink: #ffffff;
  --on-ink-secondary: rgba(255, 255, 255, 0.68);
  --on-ink-tertiary: rgba(255, 255, 255, 0.46);

  /* The one hot colour. Reserved for action: primary buttons, active tabs, price accents. */
  --brand: #f4511e;
  --brand-hover: #ff6337;
  --brand-active: #d8420f;
  --brand-contrast: #ffffff;

  /* =======================================================================================
   * LIGHT PALETTE (always defined here)
   * ===================================================================================== */

  /* Neutral surfaces, from the page canvas up to a floating panel. */
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #eef1fa;   /* the wide periwinkle band between sections */
  --surface-muted: #f5f6fa;
  --surface-inverse: var(--ink);

  /* Translucent materials used behind blur. Alpha is what makes the frosted effect read. */
  --material-thin: rgba(255, 255, 255, 0.62);
  --material-regular: rgba(255, 255, 255, 0.86);
  --material-thick: rgba(255, 255, 255, 0.96);
  --material-chrome: rgba(255, 255, 255, 0.9);

  /* Text. Secondary and tertiary are semi-transparent so they sit correctly on any surface. */
  --label: #151b25;
  --label-secondary: rgba(21, 27, 37, 0.7);
  --label-tertiary: rgba(21, 27, 37, 0.52);
  --label-quaternary: rgba(21, 27, 37, 0.32);
  --label-inverse: #ffffff;

  /* Hairlines. 1px at any density, drawn with alpha rather than a solid grey. */
  --separator: rgba(21, 27, 37, 0.1);
  --separator-strong: rgba(21, 27, 37, 0.18);
  --border-field: rgba(21, 27, 37, 0.14);

  /* Accent — an alias of the brand orange, so every component written against `--accent`
   * (forms, links, dashboards, the admin panel) inherits the new identity untouched. */
  --accent: var(--brand);
  --accent-hover: var(--brand-hover);
  --accent-active: var(--brand-active);
  --accent-soft: rgba(244, 81, 30, 0.1);
  --accent-contrast: #ffffff;
  /* A darkened orange for small text on white: the brand orange alone is 3.4:1 and fails AA. */
  --accent-text: #cc3f0d;

  --positive: #16794a;
  --positive-soft: rgba(22, 121, 74, 0.12);
  --notice: #a85b00;
  --notice-soft: rgba(168, 91, 0, 0.12);
  --critical: #cc2233;
  --critical-soft: rgba(204, 34, 51, 0.1);

  /* Depth. Wide, low-alpha shadows — this design leans on borders and bands, not on elevation. */
  --shadow-xs: 0 1px 2px rgba(21, 27, 37, 0.06);
  --shadow-s: 0 2px 4px rgba(21, 27, 37, 0.04), 0 6px 16px rgba(21, 27, 37, 0.06);
  --shadow-m: 0 4px 8px rgba(21, 27, 37, 0.05), 0 16px 32px rgba(21, 27, 37, 0.1);
  --shadow-l: 0 8px 16px rgba(21, 27, 37, 0.06), 0 32px 64px rgba(21, 27, 37, 0.16);
  --shadow-focus: 0 0 0 3px rgba(244, 81, 30, 0.3);

  /* Image placeholder shown while a listing photo loads. */
  --placeholder: linear-gradient(135deg, #e3e7f2 0%, #f1f3f9 50%, #e3e7f2 100%);

  /* Hero scrim over photography, so white text stays legible on any image. */
  --scrim: linear-gradient(180deg, rgba(21, 27, 37, 0.72) 0%, rgba(21, 27, 37, 0.6) 45%, rgba(21, 27, 37, 0.88) 100%);
  /* Bottom-weighted scrim for cards whose caption sits over the photograph. */
  --scrim-card: linear-gradient(180deg, rgba(21, 27, 37, 0) 30%, rgba(21, 27, 37, 0.85) 100%);
}

/* =========================================================================================
 * DARK PALETTE — system preference. Guarded so an explicit light choice still wins.
 * ======================================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0e1219;
    --surface: #171d27;
    --surface-raised: #1e2532;
    --surface-sunken: #12171f;
    --surface-muted: #1a212c;
    --surface-inverse: #f2f4f9;

    --material-thin: rgba(23, 29, 39, 0.62);
    --material-regular: rgba(23, 29, 39, 0.88);
    --material-thick: rgba(14, 18, 25, 0.96);
    --material-chrome: rgba(14, 18, 25, 0.9);

    --label: #f2f4f9;
    --label-secondary: rgba(235, 239, 248, 0.68);
    --label-tertiary: rgba(235, 239, 248, 0.46);
    --label-quaternary: rgba(235, 239, 248, 0.3);
    --label-inverse: #151b25;

    --separator: rgba(255, 255, 255, 0.1);
    --separator-strong: rgba(255, 255, 255, 0.18);
    --border-field: rgba(255, 255, 255, 0.16);

    --accent-soft: rgba(244, 81, 30, 0.16);
    --accent-text: #ff7a4d;

    --positive: #3ddc84;
    --positive-soft: rgba(61, 220, 132, 0.16);
    --notice: #ffab2e;
    --notice-soft: rgba(255, 171, 46, 0.16);
    --critical: #ff5a5a;
    --critical-soft: rgba(255, 90, 90, 0.16);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-s: 0 2px 4px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.5);
    --shadow-m: 0 4px 8px rgba(0, 0, 0, 0.4), 0 16px 32px rgba(0, 0, 0, 0.55);
    --shadow-l: 0 8px 16px rgba(0, 0, 0, 0.45), 0 32px 64px rgba(0, 0, 0, 0.65);

    --placeholder: linear-gradient(135deg, #1e2532 0%, #2a3241 50%, #1e2532 100%);
  }
}

/* =========================================================================================
 * DARK PALETTE — explicit choice from the in-page toggle. Wins on a light system too.
 * ======================================================================================= */
:root[data-theme="dark"] {
  --canvas: #0e1219;
  --surface: #171d27;
  --surface-raised: #1e2532;
  --surface-sunken: #12171f;
  --surface-muted: #1a212c;
  --surface-inverse: #f2f4f9;

  --material-thin: rgba(23, 29, 39, 0.62);
  --material-regular: rgba(23, 29, 39, 0.88);
  --material-thick: rgba(14, 18, 25, 0.96);
  --material-chrome: rgba(14, 18, 25, 0.9);

  --label: #f2f4f9;
  --label-secondary: rgba(235, 239, 248, 0.68);
  --label-tertiary: rgba(235, 239, 248, 0.46);
  --label-quaternary: rgba(235, 239, 248, 0.3);
  --label-inverse: #151b25;

  --separator: rgba(255, 255, 255, 0.1);
  --separator-strong: rgba(255, 255, 255, 0.18);
  --border-field: rgba(255, 255, 255, 0.16);

  --accent-soft: rgba(244, 81, 30, 0.16);
  --accent-text: #ff7a4d;

  --positive: #3ddc84;
  --positive-soft: rgba(61, 220, 132, 0.16);
  --notice: #ffab2e;
  --notice-soft: rgba(255, 171, 46, 0.16);
  --critical: #ff5a5a;
  --critical-soft: rgba(255, 90, 90, 0.16);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-s: 0 2px 4px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.5);
  --shadow-m: 0 4px 8px rgba(0, 0, 0, 0.4), 0 16px 32px rgba(0, 0, 0, 0.55);
  --shadow-l: 0 8px 16px rgba(0, 0, 0, 0.45), 0 32px 64px rgba(0, 0, 0, 0.65);

  --placeholder: linear-gradient(135deg, #1e2532 0%, #2a3241 50%, #1e2532 100%);

  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}