/* ============================================================================
   SHARP-ER - stylesheet entry
   ----------------------------------------------------------------------------
   Load order matters:
     1. tailwindcss      - preflight + the utility engine
     2. primitives.css   - TIER 1, raw scales in a @theme block
     3. semantic.css     - TIER 2, roles that alias tier 1, per surface
     4. typography.css   - type roles + @font-face + the EN/AR font switch

   See ./styles/README.md for the rules components have to follow.
   ========================================================================= */

@import "tailwindcss";
@import "./styles/primitives.css";
@import "./styles/semantic.css";
@import "./styles/typography.css";

/* ---------------------------------------------------------------------------
   DIRECTION VARIANTS
   The site is served at /en/* (LTR) and /ar/* (RTL) and lays out with logical
   properties, so these are only for the rare case that genuinely cannot be
   expressed logically (an asymmetric icon, a background position).
   ------------------------------------------------------------------------ */
@custom-variant rtl (&:where([dir="rtl"], [dir="rtl"] *));
@custom-variant ltr (&:where([dir="ltr"], [dir="ltr"] *));

@layer base {
  /* Every surface paints itself, so <footer data-surface="light"> inside a
     dark page is complete on its own. :root defaults to the dark surface. */
  html,
  body,
  [data-surface] {
    /* The design drafts stand the whole site on #0B0B0A and lift their
       bands off it with #1D1D1B, so the document's ground is the SUNKEN
       surface and `--surface-page` is the colour of a band. A section that
       wants the lighter band paints `bg-[var(--surface-page)]`; one that
       wants the ground paints nothing, or `bg-[var(--surface-sunken)]` when
       it needs to say so explicitly. */
    background-color: var(--surface-sunken);
    color: var(--text-primary);
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    font-family: var(--font-body);
    /* Tier-2 only, like everything else: --type-body-base-* is the semantic
       alias of the Body/Medium role (16/24) and lives in semantic.css. */
    font-size: var(--type-body-base-size);
    line-height: var(--type-body-base-leading);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: start;
  }

  ::selection {
    background-color: var(--surface-selection);
    color: var(--text-primary);
  }

  :focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }

  /* Headings inherit the heading family; size comes from a type role utility
     so that an <h2> used as a card title can still be body-lg-bold. */
  :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-heading);
  }

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

  ::placeholder {
    color: var(--field-placeholder);
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ---------------------------------------------------------------------------
   BANDS
   The design drafts alternate the #0B0B0A ground with lighter #1D1D1B bands,
   and a card inside a band is drawn DARKER than the band (#141413) while a
   card on the ground is drawn LIGHTER (#1D1D1B). A section paints itself with
   `.sh-band` and every Card, InfoPanel and tile inside it follows, instead of
   each route guessing its own fill.
   ------------------------------------------------------------------------ */
@layer components {
  .sh-band {
    background-color: var(--surface-page);
    --surface-card: var(--surface-raised);
  }
}