/*
 * Design-system colour tokens for web (splash, payment sheet shell, etc.).
 *
 * MUST stay in sync with:
 *   packages/app_ui/lib/src/colors/light_app_colors.dart  (:root)
 *   packages/app_ui/lib/src/colors/dark_app_colors.dart   (@media dark)
 *
 * Property names mirror Flutter ColorScheme fields.
 */

:root {
  /* Primary */
  --color-primary:               #FA5C4F;
  --color-on-primary:            #FFFFFF;
  --color-primary-container:     #FDD1CE;
  --color-on-primary-container:  #320501;

  /* Secondary */
  --color-secondary:             #522C6D;
  --color-on-secondary:          #FFFFFF;
  --color-secondary-container:   #F3EDF8;
  --color-on-secondary-container:#2E193D;

  /* Error */
  --color-error:                 #FF1F1F;
  --color-on-error:              #FFFFFF;
  --color-error-container:       #FFCCCC;
  --color-on-error-container:    #330000;

  /* Surface */
  --color-surface:               #F2F2F2;
  --color-on-surface:            #0D0D0D;
  --color-on-surface-variant:    #333333;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #EFF5F1;
  --color-surface-container:     #FFFFFF;
  --color-surface-container-high:#E6E6E6;

  /* Outline */
  --color-outline:               #E6E6E6;
  --color-outline-variant:       #EBEBEB;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Primary — same hue family as light (see DarkAppColors) */
    --color-primary:               #FA5C4F;
    --color-on-primary:            #FFFFFF;
    --color-primary-container:     #FDD1CE;
    --color-on-primary-container:  #320501;

    /* Secondary */
    --color-secondary:             #522C6D;
    --color-on-secondary:          #FFFFFF;
    --color-secondary-container:   #F3EDF8;
    --color-on-secondary-container:#2E193D;

    /* Error */
    --color-error:                 #FF1F1F;
    --color-on-error:              #FFFFFF;
    --color-error-container:       #FFCCCC;
    --color-on-error-container:    #330000;

    /* Surface — matches DarkAppColors */
    --color-surface:               #F2F2F2;
    --color-on-surface:            #0D0D0D;
    --color-on-surface-variant:    #333333;
    --color-surface-container-lowest: #FFFFFF;
    --color-surface-container-low: #EFF5F1;
    --color-surface-container:     #FFFFFF;
    --color-surface-container-high:#E6E6E6;

    /* Outline */
    --color-outline:               #E6E6E6;
    --color-outline-variant:       #EBEBEB;
  }
}