/* ─────────────────────────────────────────────────────────
   AutoBankConverter — Colour Tokens
   Direction A: Slate & Copper, dark surface variant
   Apply to :root {} in your main stylesheet
   ───────────────────────────────────────────────────────── */

:root {

  /* ── Brand ─────────────────────────────────────────── */
  --color-primary:          #243347;   /* Slate navy — nav, sidebar, headers */
  --color-primary-deep:     #1A2737;   /* Deeper slate — topbar, footer */
  --color-primary-mid:      #2E4057;   /* Mid slate — hover states on dark bg */
  --color-primary-light:    #3A5068;   /* Light slate — borders on dark bg */

  --color-accent:           #B5611A;   /* Copper — primary CTA, active states */
  --color-accent-hover:     #C97535;   /* Copper lighter — button hover */
  --color-accent-dim:       #8C4A14;   /* Copper darker — pressed state */
  --color-accent-subtle:    rgba(181, 97, 26, 0.15); /* Copper tint — bg highlights */

  /* ── Surfaces (dark) ───────────────────────────────── */
  --color-surface-base:     #1E2E3D;   /* Page background — dark slate, not black */
  --color-surface-raised:   #243347;   /* Cards, panels — one step lighter */
  --color-surface-overlay:  #2E4057;   /* Modals, dropdowns — two steps up */
  --color-surface-sunken:   #18262F;   /* Inset areas, table stripes */

  /* ── Text ──────────────────────────────────────────── */
  --color-text-primary:     #F0EAE0;   /* Main text on dark bg — warm off-white */
  --color-text-secondary:   #B8C4CC;   /* Supporting text — muted */
  --color-text-tertiary:    #7A8E9A;   /* Hints, placeholders, labels */
  --color-text-disabled:    #4A5E6A;   /* Disabled state */
  --color-text-on-accent:   #FFFFFF;   /* Text on copper buttons */

  /* ── Borders ───────────────────────────────────────── */
  --color-border-subtle:    rgba(240, 234, 224, 0.08);  /* Faint dividers */
  --color-border-default:   rgba(240, 234, 224, 0.14);  /* Standard borders */
  --color-border-strong:    rgba(240, 234, 224, 0.24);  /* Emphasis borders */
  --color-border-accent:    rgba(181, 97, 26, 0.40);    /* Copper-tinted border */

  /* ── Semantic ──────────────────────────────────────── */
  --color-success:          #2B8A5C;   /* Success text / icons */
  --color-success-bg:       rgba(43, 138, 92, 0.15);    /* Success backgrounds */
  --color-success-border:   rgba(43, 138, 92, 0.30);
  --color-surface-success:  rgba(43, 138, 92, 0.12);    /* Success surface — flash cards */
  --color-text-success:     #2B8A5C;   /* Success text alias */

  --color-warning:          #C49A28;   /* Warning text / icons */
  --color-warning-bg:       rgba(196, 154, 40, 0.15);
  --color-warning-border:   rgba(196, 154, 40, 0.30);

  --color-error:            #C04040;   /* Error text / icons */
  --color-error-bg:         rgba(192, 64, 64, 0.15);
  --color-error-border:     rgba(192, 64, 64, 0.30);
  --color-surface-error:    rgba(192, 64, 64, 0.12);    /* Error surface — flash cards */
  --color-text-error:       #C04040;   /* Error text alias */

  --color-info:             #4A8FA0;   /* Info text / icons */
  --color-info-bg:          rgba(74, 143, 160, 0.15);
  --color-info-border:      rgba(74, 143, 160, 0.30);

  /* ── Data / Table specific ─────────────────────────── */
  --color-table-header:     #1A2737;   /* Table header row bg */
  --color-table-row:        #243347;   /* Table row bg */
  --color-table-row-alt:    #1E2E3D;   /* Alternating row */
  --color-table-row-hover:  rgba(181, 97, 26, 0.08);    /* Row hover */
  --color-debit:            #F0EAE0;   /* Debit amount — neutral */
  --color-credit:           #2B8A5C;   /* Credit amount — green */
  --color-flagged:          #C49A28;   /* Flagged row indicator */

  /* ── Typography ────────────────────────────────────── */
  --font-display:  'Sora', sans-serif;       /* Headings, logo */
  --font-body:     'DM Sans', sans-serif;    /* UI, body copy */
  --font-mono:     'DM Mono', monospace;     /* File names, amounts, codes */

  /* ── Radius ────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   7px;
  --radius-lg:   10px;
  --radius-xl:   14px;

  /* ── Shadows (subtle on dark) ──────────────────────── */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.4);

}