/* ============================================================================
   APS DESIGN TOKENS — the single source every page draws from.

   ⚠️ RULES THAT KEEP THIS WORKING

   1. TOKENS ONLY. No component styles here, no element selectors. The moment a
      rule in this file targets `.aps-card h2`, one area's restyle can reach into
      another's — the handover-heading specificity trap, which cost a deploy that
      changed nothing visible.

   2. AREA STYLESHEETS ARE SELF-CONTAINED and every selector is prefixed with its
      area class. aps-operations.css owns `.aps-ops *`, aps-admin.css owns
      `.aps-adm *`, aps-org.css owns `.aps-org *`. They never style bare elements.

   3. LOGICAL PROPERTIES, ALWAYS. padding-inline, margin-block, inset-inline-start,
      border-inline-start. Operations runs LTR in English, the rest RTL in Persian,
      from one set of rules. `padding-left` is a bug in this codebase.

   4. MOBILE FIRST at 390px. Crew read handovers on a phone on a rig floor. Base
      styles are the phone; min-width media queries add the desk.

   5. Colour carries MEANING, not decoration. Navy is structure and identity,
      orange is the one action colour, gold warns, green confirms, red refuses.
      Anything grey is deliberately quiet.
   ============================================================================ */

:root {
    /* ---- brand ------------------------------------------------------------
       Kept from the existing palette rather than invented: this is APS's
       identity and a new one would be a rebrand nobody asked for. */
    --aps-navy:        #2F578B;
    --aps-navy-dark:   #24446E;
    --aps-navy-deep:   #12507A;
    --aps-orange:      #EF5736;
    --aps-orange-dark: #D2431F;
    --aps-gold:        #FBB22F;

    /* ---- neutrals, one ramp -----------------------------------------------
       Nine steps so "a bit lighter" is a token, not a new hex. Every grey in
       the system comes from here. */
    --aps-n-0:  #FFFFFF;
    --aps-n-25: #FAFBFD;
    --aps-n-50: #F5F7FA;
    --aps-n-100:#EEF2F7;
    --aps-n-200:#E4E8EF;
    --aps-n-300:#CBD3DF;
    --aps-n-400:#98A2B3;
    --aps-n-500:#667085;
    --aps-n-600:#4A535F;
    --aps-n-700:#333C49;
    --aps-n-900:#1B2430;

    /* ---- semantic: what a colour MEANS ------------------------------------ */
    --aps-ink:         var(--aps-n-900);
    --aps-ink-soft:    var(--aps-n-600);
    --aps-muted:       var(--aps-n-500);
    --aps-line:        var(--aps-n-200);
    --aps-line-strong: var(--aps-n-300);
    --aps-bg:          var(--aps-n-50);
    --aps-card:        var(--aps-n-0);
    --aps-card-alt:    var(--aps-n-25);

    --aps-primary:     var(--aps-navy);
    --aps-primary-ink: #FFFFFF;
    --aps-action:      var(--aps-orange);

    /* State. Each has a surface, a border and a text tone so a status block is
       three tokens rather than three invented hexes. */
    --aps-ok:          #1A7F4B;
    --aps-ok-bg:       #ECFAF2;
    --aps-ok-line:     #B7E6CC;

    --aps-warn:        #8A5B00;
    --aps-warn-bg:     #FFFAF0;
    --aps-warn-line:   #F3DCA8;

    --aps-bad:         #8C2318;
    --aps-bad-bg:      #FDECEA;
    --aps-bad-line:    #F2C2BC;

    --aps-info:        var(--aps-navy-deep);
    --aps-info-bg:     #EEF4FB;
    --aps-info-line:   #C9DCF0;

    /* ---- spacing: 4px base ------------------------------------------------
       Eight steps. If a gap is not on this scale it is a mistake, not a nuance. */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;

    /* ---- type -------------------------------------------------------------
       Base 15px, not 16: these are dense operational tables, and 16 forces line
       wraps at 390px that make a handover harder to read, not easier. */
    --fs-xs:  0.75rem;   /* 12 — meta, timestamps, codes           */
    --fs-sm:  0.8125rem; /* 13 — table cells, secondary            */
    --fs-md:  0.9375rem; /* 15 — body                              */
    --fs-lg:  1.0625rem; /* 17 — card titles                       */
    --fs-xl:  1.375rem;  /* 22 — section headings                  */
    --fs-2xl: 1.75rem;   /* 28 — page title                        */
    --fs-3xl: 2.25rem;   /* 36 — a single headline number          */

    --lh-tight: 1.25;
    --lh-body:  1.55;

    --fw-normal: 400;
    --fw-med:    500;
    --fw-semi:   600;
    --fw-bold:   700;

    /* ---- shape ------------------------------------------------------------ */
    --r-sm:   6px;
    --r-md:   10px;
    --r-lg:   14px;
    --r-pill: 999px;

    /* ---- elevation --------------------------------------------------------
       Three levels, all low. Enterprise software that floats looks like a toy;
       these separate layers without pretending to be paper. */
    --sh-xs: 0 1px 2px rgba(27, 36, 48, 0.05);
    --sh-sm: 0 1px 3px rgba(27, 36, 48, 0.08), 0 1px 2px rgba(27, 36, 48, 0.04);
    --sh-md: 0 4px 12px rgba(27, 36, 48, 0.10);

    /* ---- motion -----------------------------------------------------------
       One duration and one curve. Every hover in the system moves the same way. */
    --dur: 140ms;
    --ease: cubic-bezier(0.2, 0, 0.2, 1);

    /* ---- focus ------------------------------------------------------------
       ⚠️ NEVER `outline: none`. A keyboard user on a rig with gloves needs to see
       where they are. One ring, used by every interactive thing. */
    --focus-ring: 0 0 0 2px var(--aps-card), 0 0 0 4px var(--aps-navy);

    /* ---- layout ----------------------------------------------------------- */
    --content-max: 1180px;
    --tap-min: 40px;   /* minimum hit target — phones, gloves */
}

@media (prefers-reduced-motion: reduce) {
    :root { --dur: 0ms; }
}