/* tokens-a.css — Style A "Trust Advisor" palette (Parent Pat)
 * Per docs/FRONTEND_TRD_v2.md §5.2 (v1.2, corrected).
 * Import order in HTML head: brand.css → tokens-a.css → base.css → components.css → neuro.css
 */

@import url('brand.css');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap');

:root, [data-theme="light"] {
  /* Style A body font */
  --font-body: 'Work Sans', 'Helvetica Neue', sans-serif;

  /* Base surfaces */
  --color-bg:             #f2ede5;   /* warm cream — neumorphic base */
  --color-surface:        #faf7f2;   /* lighter cream */
  --color-surface-2:      #ffffff;
  --color-surface-offset: #ece6dc;   /* deeper cream for inset shadows */

  /* Palette swatches — surface fills only (never use as text on light bg) */
  --color-dusty-rose:     #b88c8c;
  --color-pink-blush:     #ddadad;
  --color-pale-greige:    #d6c7c7;
  --color-slate-teal:     #9fb9bf;
  --color-powder-blue:    #aec8ce;

  /* Typography */
  --color-text:           #231515;   /* AAA on bg */
  --color-text-muted:     #6b4c40;   /* AA on bg (6.59:1) — NEVER on pastels */
  --color-text-faint:     #9b7a74;   /* decorative, large only */
  --color-text-inverse:   #faf7f2;

  /* CTAs */
  --color-cta:            #9fb9bf;   /* Slate Teal */
  --color-cta-text:       #231515;   /* AAA 8.55:1 on teal */
  --color-cta-hover:      #7ea5ad;
  --color-cta-active:     #5c8f99;

  /* Semantic */
  --color-success:        #437a22;
  --color-warning:        #964219;
  --color-error:          #a12c2c;
  --color-info:           #aec8ce;

  /* Brand-anchor focus token — used by :focus-visible in base.css */
  --color-primary:        #5c8f99;

  /* Neumorphism shadow tokens */
  --neuro-light:  -6px -6px 14px #ffffff;
  --neuro-dark:    6px  6px 14px #d4cfc7;
  --neuro-inset:  inset 4px 4px 8px #d4cfc7, inset -4px -4px 8px #ffffff;
  --neuro-border: 1.5px solid rgba(35, 21, 21, 0.14);

  /* Standard shadows */
  --shadow-sm: 0 1px 2px rgba(35, 21, 21, 0.06);
  --shadow-md: 0 4px 12px rgba(35, 21, 21, 0.08);
  --shadow-lg: 0 12px 32px rgba(35, 21, 21, 0.12);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Body links */
a { color: var(--color-cta-active); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--color-text); }

/* Skip-link visual finish */
.skip-link {
  background: var(--color-cta);
  color: var(--color-cta-text);
}