/* ============================================================================
   OddDraw Design System — Dragon Skin v4 Foundations
   ============================================================================ */
:root,
:root[data-theme="dark"] {
  --cm-bg-base:     #12100A;
  --cm-bg-surface:  #1C1912;
  --cm-bg-elevated: #262118;
  --cm-bg-overlay:  #312B1F;

  --cm-primary:        #1A7A52;
  --cm-primary-hover:  #208A5E;
  --cm-primary-active: #15683F;
  --cm-primary-subtle: rgba(26,122,82,0.15);

  --cm-secondary:        #C8A84B;
  --cm-secondary-hover:  #D4B455;
  --cm-secondary-active: #B89638;
  --cm-secondary-text:   #C8A84B;

  --cm-text-primary:   #F2EDD8;
  --cm-text-secondary: #BFB49A;
  --cm-text-tertiary:  #9A8E76;
  --cm-text-disabled:  #57503E;
  --cm-text-inverse:   #12100A;
  --cm-text-link:      #4DC494;

  --cm-border:         #3A3020;
  --cm-border-subtle:  #272015;
  --cm-border-strong:  #4A3D28;
  --cm-border-focus:   #C8A84B;
  --cm-border-accent:  #1A7A52;

  --cm-scrim:       rgba(18,16,10,0.6);
  --cm-scrim-heavy: rgba(18,16,10,0.8);

  --cm-success: #22c55e;
  --cm-warning: #f59e0b;
  --cm-error:   #ef4444;
  --cm-info:    #4A9ECC;

  --cm-shadow-color: rgba(18,16,10,0.5);
}

:root[data-theme="light"] {
  --cm-bg-base:     #FBF7F0;
  --cm-bg-surface:  #F5F0E6;
  --cm-bg-elevated: #EBE3D5;
  --cm-bg-overlay:  #E0D6C4;

  --cm-primary:        #1A7A52;
  --cm-primary-hover:  #208A5E;
  --cm-primary-active: #15683F;
  --cm-primary-subtle: rgba(26,122,82,0.15);

  --cm-secondary:        #7A5E0A;
  --cm-secondary-hover:  #8A6A14;
  --cm-secondary-active: #6A5008;
  --cm-secondary-text:   #7A5E0A;

  --cm-text-primary:   #1A1509;
  --cm-text-secondary: #5C4E35;
  --cm-text-tertiary:  #7A6848;
  --cm-text-disabled:  #C4B89E;
  --cm-text-inverse:   #FBF7F0;
  --cm-text-link:      #0F6040;

  --cm-border:         #CFC3A8;
  --cm-border-subtle:  #E0D6C4;
  --cm-border-strong:  #B8A888;
  --cm-border-focus:   #7A5E0A;
  --cm-border-accent:  #1A7A52;

  --cm-scrim:       rgba(18,16,10,0.5);
  --cm-scrim-heavy: rgba(18,16,10,0.7);

  --cm-shadow-color: rgba(120,100,60,0.18);
}

:root {
  --cm-font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --cm-font-ui:      'Nunito Sans', -apple-system, 'SF Pro', 'Segoe UI', Roboto, sans-serif;
  --cm-w-regular: 400; --cm-w-medium: 500; --cm-w-semibold: 600; --cm-w-bold: 700;

  --cm-radius-sm: 4px;  --cm-radius-md: 6px;  --cm-radius-lg: 8px;
  --cm-radius-xl: 12px; --cm-radius-2xl: 16px; --cm-radius-full: 9999px;

  --cm-shadow-sm: 0 1px 2px var(--cm-shadow-color);
  --cm-shadow-md: 0 2px 4px var(--cm-shadow-color);
  --cm-shadow-lg: 0 4px 8px var(--cm-shadow-color);
  --cm-shadow-xl: 0 8px 16px var(--cm-shadow-color);
}

/* white canvas overrides for light mode cards */
:root[data-theme="light"] {
  --cm-bg-base: #FFFFFF;
  --cm-bg-surface: #FFFFFF;
  --cm-bg-elevated: #F3F3F1;
  --cm-bg-overlay: #FFFFFF;
  --cm-border: #E4E2DC;
  --cm-border-subtle: #ECEAE4;
  --cm-border-strong: #D2D0C9;
  --cm-shadow-color: rgba(60,50,28,0.12);
}