/* ==========================================================================
   Norman. design tokens
   --------------------------------------------------------------------------
   The single source of colour, type and space for Norman. Every component
   reads from here. No component file declares a literal colour, and
   `lint-tokens.sh` fails the build if one does.

   THE ONE RULE THAT SHAPES THIS FILE:

     Semantic colour is reserved. Green means two sources agree. Amber means a
     feed is stale. Red means they disagree. Those three are never used for
     emphasis, branding, links or decoration.

     The brand accent therefore sits OUTSIDE the semantic set. It is a deep ink
     blue, and it never competes with a status.

   This is not a style preference. In a product whose entire claim is that
   systems agree and somebody is told when they stop, a green full stop next to
   a green status dot is an ambiguity in the interface, not a colour clash.

   LIGHT IS THE DEFAULT. Dark is available. The buyer is an owner-operator
   reading a morning brief in a lit office, frequently on a phone. Dark-first
   is a builder's preference and it is not who this is for.
   ========================================================================== */

:root {
  /* --- ground ------------------------------------------------------------ */
  /* Warm off-white, not cold grey. The neutral is biased toward the accent's
     complement so it reads as chosen rather than inherited. */
  --n-paper:        #F5F3EF;
  --n-card:         #FFFFFF;
  --n-sunk:         #EAE7E0;
  --n-rule:         #D6D1C7;
  --n-rule-strong:  #B4AEA1;

  /* --- ink --------------------------------------------------------------- */
  --n-ink:          #14171A;
  --n-ink-2:        #56606A;
  --n-ink-3:        #8A949C;

  /* --- brand. Never a status. -------------------------------------------- */
  --n-brand:        #1C3F5E;
  --n-brand-hover:  #2E6389;
  --n-brand-soft:   #E4EBF1;

  /* --- semantic. Status only. Never decoration. -------------------------- */
  --n-agree:        #1F7A4D;   /* sources match                              */
  --n-agree-soft:   #E1F0E7;
  --n-stale:        #A0691A;   /* feed is late                               */
  --n-stale-soft:   #F7EEDC;
  --n-break:        #A3342A;   /* sources disagree                           */
  --n-break-soft:   #F6E4E1;

  /* --- type -------------------------------------------------------------- */
  /* System stacks by choice, not by omission. A webfont behind a CDN is a
     silent fallback waiting to happen, and this system ships inside a
     dashboard, an artifact and a PDF export. */
  --n-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, Helvetica, Arial, sans-serif;
  --n-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
            "Liberation Mono", monospace;

  --n-text-xs:   11px;
  --n-text-sm:   13px;
  --n-text-base: 15px;
  --n-text-md:   17px;
  --n-text-lg:   20px;
  --n-text-xl:   24px;
  --n-text-2xl:  32px;
  --n-text-3xl:  clamp(30px, 5vw, 46px);

  --n-leading-tight: 1.18;
  --n-leading-body:  1.6;

  /* --- space ------------------------------------------------------------- */
  --n-1:  4px;
  --n-2:  8px;
  --n-3:  12px;
  --n-4:  16px;
  --n-5:  22px;
  --n-6:  30px;
  --n-8:  44px;
  --n-10: 62px;
  --n-12: 86px;

  /* --- surface ----------------------------------------------------------- */
  --n-radius:    4px;
  --n-radius-sm: 2px;
  --n-edge:      3px;   /* the left edge on anything that carries weight     */
  --n-lift: 0 1px 2px rgba(20, 23, 26, .05),
            0 4px 14px rgba(20, 23, 26, .05);
  --n-focus: var(--n-brand-hover);
}

/* Un-stamped document following a dark OS. Guarded so an explicit light
   choice still wins. Tokens only: never style a component in here. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --n-paper:        #101316;
    --n-card:         #191E22;
    --n-sunk:         #14181C;
    --n-rule:         #2A3238;
    --n-rule-strong:  #3C464E;

    --n-ink:          #E7E3DA;
    --n-ink-2:        #98A2AA;
    --n-ink-3:        #6E7981;

    --n-brand:        #6FA8D0;
    --n-brand-hover:  #90C0E0;
    --n-brand-soft:   #1B2A36;

    --n-agree:        #5BBF8A;
    --n-agree-soft:   #17281F;
    --n-stale:        #D9A441;
    --n-stale-soft:   #2A2318;
    --n-break:        #D9705F;
    --n-break-soft:   #2C1B18;

    --n-lift: 0 1px 2px rgba(0, 0, 0, .5),
              0 6px 18px rgba(0, 0, 0, .35);
  }
}

/* Explicit dark choice. Wins over a light OS. */
:root[data-theme="dark"] {
  --n-paper:        #101316;
  --n-card:         #191E22;
  --n-sunk:         #14181C;
  --n-rule:         #2A3238;
  --n-rule-strong:  #3C464E;

  --n-ink:          #E7E3DA;
  --n-ink-2:        #98A2AA;
  --n-ink-3:        #6E7981;

  --n-brand:        #6FA8D0;
  --n-brand-hover:  #90C0E0;
  --n-brand-soft:   #1B2A36;

  --n-agree:        #5BBF8A;
  --n-agree-soft:   #17281F;
  --n-stale:        #D9A441;
  --n-stale-soft:   #2A2318;
  --n-break:        #D9705F;
  --n-break-soft:   #2C1B18;

  --n-lift: 0 1px 2px rgba(0, 0, 0, .5),
            0 6px 18px rgba(0, 0, 0, .35);
}