@import url('/lib/webawesome/styles/layers.css');

@layer wa-theme {
  .wa-theme-tomelight {
    --wa-color-brand-05: #18072d;
    --wa-color-brand-10: #240b45;
    --wa-color-brand-20: #351063;
    --wa-color-brand-30: #4c1888;
    --wa-color-brand-40: #6624ad;
    --wa-color-brand-50: #803bd0;
    --wa-color-brand-60: #9b61e8;
    --wa-color-brand-70: #b888f4;
    --wa-color-brand-80: #d1aff9;
    --wa-color-brand-90: #e8d6fd;
    --wa-color-brand-95: #f5edff;
    --wa-color-brand: #9b61e8;
    --wa-color-brand-on: white;

    --wa-color-neutral-05: #15101f;
    --wa-color-neutral-10: #20192c;
    --wa-color-neutral-20: #352c43;
    --wa-color-neutral-30: #4c405c;
    --wa-color-neutral-40: #675a75;
    --wa-color-neutral-50: #82758f;
    --wa-color-neutral-60: #9f93ab;
    --wa-color-neutral-70: #bdb3c6;
    --wa-color-neutral-80: #d6cedd;
    --wa-color-neutral-90: #ebe6ef;
    --wa-color-neutral-95: #f7f4f9;
    --wa-color-neutral: #82758f;
    --wa-color-neutral-on: white;

    --wa-color-warning-05: #281600;
    --wa-color-warning-10: #3d2100;
    --wa-color-warning-20: #613600;
    --wa-color-warning-30: #875008;
    --wa-color-warning-40: #ad711d;
    --wa-color-warning-50: #d39436;
    --wa-color-warning-60: #e9b969;
    --wa-color-warning-70: #f1cb8e;
    --wa-color-warning-80: #f7ddb4;
    --wa-color-warning-90: #fbeed9;
    --wa-color-warning-95: #fff8ec;
    --wa-color-warning: #e9b969;
    --wa-color-warning-on: #281600;

    --wa-font-family-body: "Inter", ui-sans-serif, system-ui, sans-serif;
    --wa-font-family-heading: "Cinzel", Georgia, serif;
    --wa-font-family-longform: Georgia, "Times New Roman", serif;
    --wa-font-weight-normal: 400;
    --wa-font-weight-semibold: 600;
    --wa-font-weight-bold: 700;
    --wa-font-weight-body: var(--wa-font-weight-normal);
    --wa-font-weight-heading: var(--wa-font-weight-semibold);
    --wa-font-weight-action: var(--wa-font-weight-semibold);
    --wa-line-height-condensed: 1.3;
    --wa-line-height-normal: 1.6;

    --wa-border-width-scale: 1;
    --wa-border-radius-scale: 0.85;
    --wa-focus-ring-width: var(--wa-border-width-m);
    --wa-focus-ring-offset: var(--wa-border-width-s);

    --wa-shadow-offset-y-scale: 0.75;
    --wa-shadow-blur-scale: 2;
    --wa-shadow-spread-scale: -0.75;

    --wa-form-control-border-color: var(--wa-color-neutral-border-loud);
    --wa-form-control-border-radius: var(--wa-border-radius-m);
    --wa-form-control-activated-color: var(--wa-color-brand-border-loud);
    --wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
    --wa-form-control-label-line-height: var(--wa-line-height-condensed);

    --wa-button-transform-hover: translateY(calc(-1 * var(--wa-border-width-s)));
    --wa-button-transform-active: translateY(var(--wa-border-width-s));

    --wa-panel-border-radius: var(--wa-border-radius-l);
  }

  .wa-theme-tomelight.wa-dark,
  .wa-theme-tomelight .wa-dark,
  .wa-dark .wa-theme-tomelight {
    color-scheme: dark;
    color: var(--wa-color-text-normal);
    --tomelight-color-surface: #191321;
    --wa-color-surface-raised: var(--tomelight-color-surface);
    --wa-color-surface-default: var(--tomelight-color-surface);
    --wa-color-surface-lowered: var(--tomelight-color-surface);
    --wa-color-surface-border: #3b3049;
    --wa-color-text-normal: #f4eff8;
    --wa-color-text-quiet: #aca1b7;
    --wa-color-text-link: #c69af7;
    --wa-color-neutral-border-loud: var(--wa-color-neutral-50);
    --wa-color-shadow: color-mix(in oklab, black 58%, transparent);
    --wa-color-focus: #b888f4;
    --wa-form-control-background-color: var(--tomelight-color-surface);
  }
}