/* BabyForum Contao — tokens. Names must match Vanilla
   themes/babyforum/design/style.css :root
   Bind this file first in the Contao page layout. */

@layer tokens, legacy, base, layout, contao, components, pages, utilities;

@layer tokens {
  :root {
    --color-primary: #344254;
    --color-accent: #EA6D86;
    --color-accent-light: #ffeaee;
    --color-link: #4fc6de;
    --color-link-light: #ddf5fb;
    --color-text: #2b2e3d;
    --color-surface: #ffffff;
    --color-bg: #f6f9fc;
    --color-border: #BFCAD9;
    --color-muted: #5f738c;
    --color-meta: #5a6f86;

    --color-muted-5: rgba(126, 150, 179, 0.05);
    --color-muted-10: rgba(126, 150, 179, 0.1);
    --color-muted-15: rgba(126, 150, 179, 0.15);
    --color-muted-20: rgba(126, 150, 179, 0.2);
    --color-muted-30: rgba(126, 150, 179, 0.3);

    --color-primary-10: rgba(50, 66, 93, 0.1);
    --color-on-dark: #ffffff;
    --color-dropdown: #4d5b6d;

    --cat-yellow: #faf2da;
    --cat-pink: #ffeaee;
    --cat-red: #ffe4e4;
    --cat-peach: #fbe5d8;
    --cat-purple: #e5e1ff;
    --cat-magenta: #f9ddf1;
    --cat-green: #ebf5d8;
    --cat-mint: #e2f4e3;
    --cat-blue: #daedff;

    --color-success: #2f7d43;
    --color-success-bg: #e2f4e3;
    --color-warning: #b8860b;
    --color-warning-bg: #fff8e8;
    --color-danger: #e23d5a;
    --color-danger-strong: #c92a45;
    --color-danger-bg: #ffeaee;
    --color-text-soft: #5b6b80;
    --color-footer-bg: #fff3ef;

    --font-body: 'Inter', sans-serif;
    --font-heading: 'Fraunces', serif;

    --text-xs: 0.7rem;
    --text-sm: 0.8rem;
    --text-base: 0.9rem;
    --text-md: 1rem;
    --text-lg: 1.2rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.8rem;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --leading-tight: 1.4em;
    --leading-normal: 1.5rem;
    --leading-relaxed: 1.8rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    --shadow-sm: 0 2px 8px rgba(50, 66, 93, 0.06);
    --shadow-md: 0 5px 12px rgba(56, 65, 103, 0.1);
    --shadow-lg: 0 15px 35px rgba(50, 66, 93, 0.1);

    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.5s ease;
    --fadein-duration: 0.25s;

    --z-raised: 10;
    --z-header: 200;
    --z-drawer-backdrop: 400;
    --z-drawer: 410;
    --z-drawer-toggle: 420;

    --touch-min: 44px;

    --bg-blob: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIGhlaWdodD0iMjQxIiB2aWV3Qm94PSIwIDAgMTE3MSAyNDEiIHdpZHRoPSIxMTcxIj48ZyBmaWx0ZXI9InVybCgjZmlsdGVyMF9mKSIgb3BhY2l0eT0iMC4xIj48cGF0aCBkPSJNNzMxLTE3OWMtMTM1IDIxLjctMjE1IDEwNS0xNzkgMTg2IDM2LjIgODEuMyAxNzUgMTI5IDMxMCAxMDcgMTM1LTIxLjcgMjE1LTEwNSAxNzktMTg2LTM2LjItODEuMy0xNzUtMTI5LTMxMC0xMDd6IiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXIpIi8+PHBhdGggZD0iTTM3OCAxMTRjMTQyIDAgMjU4LTY4LjIgMjU4LTE1MiAwLTg0LjEtMTE1LTE1Mi0yNTgtMTUyLTE0MiAwLTI1OCA2OC4yLTI1OCAxNTIgMCA4NC4xIDExNSAxNTIgMjU4IDE1MnoiIGZpbGw9InVybCgjcGFpbnQxX2xpbmVhcikiLz48L2c+PGRlZnM+PGZpbHRlciBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiIgaGVpZ2h0PSI1NTAiIGlkPSJmaWx0ZXIwX2YiIHdpZHRoPSIxMTcwIiB4PSIwIiB5PSItMzEwIj48ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9InNoYXBlIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNjAiIHJlc3VsdD0iZWZmZWN0MV9mb3JlZ3JvdW5kQmx1ciIvPjwvZmlsdGVyPjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhciIgeDE9IjU2NyIgeTE9IjEuMDMiIHgyPSIxMDI5IiB5Mj0iNjQuNiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiMwMDFBRkYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM2RUU1QzIiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQxX2xpbmVhciIgeDE9IjE1NSIgeTE9Ii0xMS4wIiB4Mj0iNTExIiB5Mj0iLTE2MiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNGRkM4M0EiLz48c3RvcCBvZmZzZXQ9IjAuNTAiIHN0b3AtY29sb3I9IiNGRjAwOEEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM2MTAwRkYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4=");
  }
}
