/* =============================================================================
   Asiam3 design tokens
   =============================================================================

   Plain CSS custom properties. No framework, no build step, no vendor.

   This is deliberate. The frontend framework is an open decision, so the design
   language is expressed in the one layer every candidate can consume. A token
   file that required a specific toolchain would decide D4 by accident, and the
   design language belongs to Asiam3 rather than to whatever renders it.

   -----------------------------------------------------------------------------
   The point of view
   -----------------------------------------------------------------------------

   Asiam3 sells trust to people spending real money with small businesses, often
   on inexpensive phones over uneven connections. The memorable quality of this
   interface should not be an aesthetic flourish. It should be that **you always
   know exactly what is true**: whose data you are looking at, by what right, and
   what state the money is in.

   So the signature element is structural rather than decorative: a persistent
   authority band that states whose data is on screen and under what authorisation.
   It is a security control expressed as design, and it is the one thing that
   would be missing if someone copied this system without understanding it.

   -----------------------------------------------------------------------------
   The colour decision that matters most
   -----------------------------------------------------------------------------

   Most design systems collapse every positive state into one green. Asiam3 cannot.

   The Constitution says verification claims something narrow: that credentials
   were checked, in a stated scope, at a stated time. It does not claim the
   business is good, safe or guaranteed. The Vision is blunter: a badge that
   promises more than it can support is worse than no badge.

   If "verified" is rendered in the same celebratory green as "payment received"
   and "saved successfully", the interface promises more than the platform can
   support, and it does so in a way no legal disclaimer undoes. So verification
   gets its own restrained, cooler mark, distinct from success and distinct from
   settled money. Three meanings, three treatments.

   The same reasoning separates denied from error from conflict. To a user those
   are different situations with different next actions, and to an attacker the
   difference between them is information. They are never rendered alike.
============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     Palette
     Ink-and-instrument. A cool near-neutral ground that reads as a working tool
     rather than a brochure, with a single deep primary carrying authority.
     Deliberately not the warm-cream-and-terracotta or near-black-and-acid-accent
     that generated interfaces default to, and deliberately not a literal
     national palette, which would be a costume rather than a decision.
  --------------------------------------------------------------------------- */
  --a3-ink-900: #0e1a24;
  --a3-ink-800: #16242f;
  --a3-ink-700: #26333d;
  --a3-ink-600: #43525e;
  --a3-ink-500: #64737f;
  --a3-ink-400: #8e9aa4;
  --a3-ink-300: #b9c2c9;
  --a3-ink-200: #dbe1e5;
  --a3-ink-100: #eef1f3;
  --a3-ink-050: #f7f9fa;
  --a3-white:   #ffffff;

  /* Primary: deep teal-blue. Authority without corporate navy blandness. */
  --a3-primary-700: #0a4f5c;
  --a3-primary-600: #0d6274;
  --a3-primary-500: #10788d;
  --a3-primary-300: #7fb9c5;
  --a3-primary-100: #e0eff2;

  /* Semantic states. Each one means a different thing and looks different. */
  --a3-success-600: #1d7a4a;   /* an action completed */
  --a3-success-100: #e3f4ea;
  --a3-settled-600: #145c73;   /* money has settled. Sober, not celebratory */
  --a3-settled-100: #e2eff4;
  --a3-verified-600: #4a5fa8;  /* credentials checked, in scope, at a time */
  --a3-verified-100: #e9ecf8;
  --a3-pending-600: #8a6216;   /* awaiting something outside our control */
  --a3-pending-100: #fbf1dc;
  --a3-warning-600: #a35a12;
  --a3-warning-100: #fdeee0;
  --a3-danger-600:  #a32020;   /* destructive or failed */
  --a3-danger-100:  #fbe6e6;
  --a3-denied-600:  #5f4470;   /* not permitted. Never confused with an error */
  --a3-denied-100:  #f1ecf5;

  /* ---------------------------------------------------------------------------
     Semantic surfaces
     Components reference these, never raw palette values, so a theme change is
     a token change rather than an audit of every component.
  --------------------------------------------------------------------------- */
  --a3-bg:              var(--a3-ink-050);
  --a3-bg-raised:       var(--a3-white);
  --a3-bg-sunken:       var(--a3-ink-100);
  --a3-bg-inverse:      var(--a3-ink-900);
  --a3-border:          var(--a3-ink-200);
  --a3-border-strong:   var(--a3-ink-300);
  --a3-text:            var(--a3-ink-900);
  --a3-text-secondary:  var(--a3-ink-600);
  --a3-text-muted:      var(--a3-ink-500);
  --a3-text-inverse:    var(--a3-white);
  --a3-link:            var(--a3-primary-600);
  --a3-focus:           #1a8fb0;

  /* ---------------------------------------------------------------------------
     Type
     Roles, not faces. The specific families are a token so they can change
     without touching a component.

     Body is a humanist sans at a size that survives a cheap Android screen in
     daylight. Numeric is a separate role with tabular figures, because money in
     a column that does not align is money a merchant cannot scan, and
     misreading an amount is the most expensive typographic failure here.
  --------------------------------------------------------------------------- */
  --a3-font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --a3-font-display: "Inter Tight", "Inter", "Segoe UI", system-ui, sans-serif;
  --a3-font-numeric: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --a3-text-2xs: 0.6875rem; /* 11px. Metadata only. Never an instruction */
  --a3-text-xs:  0.75rem;
  --a3-text-sm:  0.8125rem;
  --a3-text-md:  0.9375rem; /* 15px body. 16px on touch, see responsive rules */
  --a3-text-lg:  1.0625rem;
  --a3-text-xl:  1.3125rem;
  --a3-text-2xl: 1.625rem;
  --a3-text-3xl: 2.125rem;

  --a3-weight-regular: 400;
  --a3-weight-medium: 500;
  --a3-weight-semibold: 600;

  --a3-leading-tight: 1.25;
  --a3-leading-normal: 1.5;
  --a3-leading-relaxed: 1.65;

  /* Measure. Prose beyond this is measurably harder to read. */
  --a3-measure: 68ch;

  /* ---------------------------------------------------------------------------
     Space. A 4px base, because a commerce back office needs a denser rhythm
     than an 8px-only scale allows without everything becoming a compromise.
  --------------------------------------------------------------------------- */
  --a3-space-1: 0.25rem;
  --a3-space-2: 0.5rem;
  --a3-space-3: 0.75rem;
  --a3-space-4: 1rem;
  --a3-space-5: 1.5rem;
  --a3-space-6: 2rem;
  --a3-space-7: 3rem;
  --a3-space-8: 4rem;

  /* ---------------------------------------------------------------------------
     Density
     One system, two densities. A customer reading one order and a merchant
     scanning two hundred are not the same task, and forcing both into a single
     rhythm makes one of them worse. Set --a3-density-row on a container.
  --------------------------------------------------------------------------- */
  --a3-density-row: 2.75rem;        /* comfortable, default */
  --a3-density-row-compact: 2.125rem;

  /* Shape. Restrained. A commerce console is not a consumer app. */
  --a3-radius-sm: 3px;
  --a3-radius-md: 5px;
  --a3-radius-lg: 8px;

  /* Elevation, used sparingly. Depth should mean "this is above the page",
     not "this is important". */
  --a3-shadow-raised: 0 1px 2px rgba(14, 26, 36, 0.06), 0 1px 3px rgba(14, 26, 36, 0.08);
  --a3-shadow-overlay: 0 8px 24px rgba(14, 26, 36, 0.16), 0 2px 6px rgba(14, 26, 36, 0.08);

  /* Focus. Never removed, never subtle. Two-tone so it survives any background. */
  --a3-focus-ring: 0 0 0 2px var(--a3-bg-raised), 0 0 0 4px var(--a3-focus);

  /* Touch. 44px minimum on any control a finger uses. */
  --a3-touch-min: 44px;

  --a3-duration-fast: 120ms;
  --a3-duration-normal: 200ms;
  --a3-ease: cubic-bezier(0.2, 0, 0.2, 1);

  --a3-z-sticky: 100;
  --a3-z-overlay: 500;
  --a3-z-toast: 900;
}

/* -----------------------------------------------------------------------------
   Dark theme
   Redefines tokens only. No component knows a theme exists.
   Both an explicit choice and the system default are honoured.
----------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-a3-theme="light"]) {
    --a3-bg:             #0b1319;
    --a3-bg-raised:      #131f27;
    --a3-bg-sunken:      #091015;
    --a3-bg-inverse:     var(--a3-ink-100);
    --a3-border:         #24343f;
    --a3-border-strong:  #354956;
    --a3-text:           #e8edf0;
    --a3-text-secondary: #a9b6c0;
    --a3-text-muted:     #7e8d99;
    --a3-text-inverse:   var(--a3-ink-900);
    --a3-link:           #63b8cc;
    --a3-focus:          #4fc3e0;

    --a3-primary-600: #2b93ab;
    --a3-primary-100: #10303a;
    --a3-success-600: #46b07a; --a3-success-100: #0f2b1f;
    --a3-settled-600: #4aa7c4; --a3-settled-100: #0d2731;
    --a3-verified-600: #8f9fd9; --a3-verified-100: #1a1f38;
    --a3-pending-600: #d0a047; --a3-pending-100: #2c2313;
    --a3-warning-600: #d38a45; --a3-warning-100: #2e1e11;
    --a3-danger-600:  #e06666; --a3-danger-100:  #2e1414;
    --a3-denied-600:  #a48cb8; --a3-denied-100:  #221a29;
  }
}

:root[data-a3-theme="dark"] {
  --a3-bg:             #0b1319;
  --a3-bg-raised:      #131f27;
  --a3-bg-sunken:      #091015;
  --a3-bg-inverse:     var(--a3-ink-100);
  --a3-border:         #24343f;
  --a3-border-strong:  #354956;
  --a3-text:           #e8edf0;
  --a3-text-secondary: #a9b6c0;
  --a3-text-muted:     #7e8d99;
  --a3-text-inverse:   var(--a3-ink-900);
  --a3-link:           #63b8cc;
  --a3-focus:          #4fc3e0;

  --a3-primary-600: #2b93ab;
  --a3-primary-100: #10303a;
  --a3-success-600: #46b07a; --a3-success-100: #0f2b1f;
  --a3-settled-600: #4aa7c4; --a3-settled-100: #0d2731;
  --a3-verified-600: #8f9fd9; --a3-verified-100: #1a1f38;
  --a3-pending-600: #d0a047; --a3-pending-100: #2c2313;
  --a3-warning-600: #d38a45; --a3-warning-100: #2e1e11;
  --a3-danger-600:  #e06666; --a3-danger-100:  #2e1414;
  --a3-denied-600:  #a48cb8; --a3-denied-100:  #221a29;
}

/* -----------------------------------------------------------------------------
   Surface accents
   The three surfaces are visually distinguishable at a glance, because knowing
   which one you are in is an authorization fact, not a preference. Customer,
   merchant and control plane carry different authority; an operator who thinks
   they are in one while acting in another is the mistake this prevents.
   Applied by the authority band, never by restyling components.
----------------------------------------------------------------------------- */
[data-a3-surface="customer"] { --a3-surface-accent: var(--a3-primary-600); }
[data-a3-surface="merchant"] { --a3-surface-accent: #4a6b2f; }
[data-a3-surface="control"]  { --a3-surface-accent: #6b3f7a; }

/* -----------------------------------------------------------------------------
   Motion
   Honoured, not decorated. Someone who has asked their operating system to
   reduce motion has asked for a reason.
----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --a3-duration-fast: 1ms;
    --a3-duration-normal: 1ms;
  }
}