/*
  ComplyMenu — theme.css
  Design tokens as CSS custom properties. Light is the default theme;
  dark is scaffolded per instruction but not yet tuned — the type colors
  below are reused as-is on dark until Ez reviews and adjusts.
*/

:root,
[data-theme="light"] {
  /* Neutral surfaces — sampled directly from the approved canvas layout */
  --cm-surface-header: #fbfbfb;
  --cm-surface-sidebar: #e8e8e8;
  --cm-surface-content: #f0f0f0;
  --cm-surface-card: #ffffff;
  --cm-border-subtle: #e5edf5; /* Stripe's documented hairline value — cooler/lighter than a flat grey */

  /* Typography colors — as defined */
  --cm-text-title: #061b31;      /* Fraunces — dark titles */
  --cm-text-subtitle: #64748d;   /* Fraunces — lighter subtitles */
  --cm-text-copy: #50617a;       /* Open Sans — copy / small text */
  --cm-text-link: #533afd;       /* Open Sans — links */
  --cm-text-link-hover: #4227e0; /* derived: slightly deeper than link for hover state, revisit if undesired */
  --cm-text-data: #061b31;       /* DM Mono — numbers/figures. Color not specified separately;
                                    defaulting to the title color for strongest legibility.
                                    Flag to Ez: confirm or override. */

  /* Status badges — soft tinted background + solid darker text, matching Stripe's own
     badge pattern (e.g. their success badge: translucent green bg, #108c3d text). */
  --cm-status-ok-bg: rgba(21, 190, 83, 0.14);
  --cm-status-ok-text: #108c3d;
  --cm-status-ok-border: rgba(21, 190, 83, 0.35);

  --cm-status-warn-bg: rgba(234, 160, 0, 0.14);
  --cm-status-warn-text: #92600a;
  --cm-status-warn-border: rgba(234, 160, 0, 0.35);

  --cm-status-overdue-bg: rgba(205, 61, 100, 0.14);
  --cm-status-overdue-text: #b3123f;
  --cm-status-overdue-border: rgba(205, 61, 100, 0.35);
}

[data-theme="dark"] {
  /* Placeholder dark neutrals — inverted relative scale matching the light layout's structure */
  --cm-surface-header: #10151d;
  --cm-surface-sidebar: #161c26;
  --cm-surface-content: #0c1017;
  --cm-surface-card: #1a212c;
  --cm-border-subtle: #2a323e;

  /* Same type colors as light theme for now, per instruction — revisit once dark is actually reviewed.
     Known likely issue: --cm-text-title and --cm-text-data are very dark navy and will have poor
     contrast on dark surfaces above. Left as-is intentionally until Ez flags it. */
  --cm-text-title: #061b31;
  --cm-text-subtitle: #64748d;
  --cm-text-copy: #50617a;
  --cm-text-link: #533afd;
  --cm-text-link-hover: #6a52ff;
  --cm-text-data: #061b31;

  --cm-status-ok-bg: rgba(21, 190, 83, 0.18);
  --cm-status-ok-text: #4ade80;
  --cm-status-ok-border: rgba(21, 190, 83, 0.4);

  --cm-status-warn-bg: rgba(234, 160, 0, 0.18);
  --cm-status-warn-text: #fbbf24;
  --cm-status-warn-border: rgba(234, 160, 0, 0.4);

  --cm-status-overdue-bg: rgba(205, 61, 100, 0.18);
  --cm-status-overdue-text: #fb7185;
  --cm-status-overdue-border: rgba(205, 61, 100, 0.4);
}

/* Font family tokens, referenced everywhere instead of hardcoding family names */
:root {
  --cm-font-title: "Fraunces", Georgia, serif;
  --cm-font-copy: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --cm-font-data: "DM Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Layout tokens */
  --cm-sidebar-width: 240px;
  --cm-sidebar-collapsed-width: 72px;
  --cm-header-height: 64px;
  --cm-radius-card: 12px;      /* outer card — matches Ez's approved canvas reference */
  --cm-radius-control: 6px;    /* buttons, inputs, badges — tighter, per Stripe's 4-8px convention */
}

/* Tabular figures for any numeric column — keeps digits aligned in tables/lists,
   same technique Stripe uses for financial data. */
.cm-tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}