/* DEZIGNED. marketing site — design tokens
   Source of truth: frontend-new (app.dezigned.com). See reference/design-tokens.md
   for the file each value came from. */
:root {
  /* Brand colors */
  --color-primary: #022041;          /* brand navy: text, buttons, header */
  --color-primary-hover: #1a3a5c;    /* antd auto-lightened hover */
  --color-primary-80: rgba(2, 32, 65, 0.8);
  --color-primary-60: rgba(2, 32, 65, 0.6);   /* modal / drawer mask */
  --color-primary-45: rgba(2, 32, 65, 0.45);
  --color-primary-20: rgba(2, 32, 65, 0.2);
  --color-primary-05: rgba(2, 32, 65, 0.05);
  --color-secondary: #e0e7ee;        /* pale blue-grey surface */
  --color-secondary-33: rgba(224, 231, 238, 0.33);
  --color-accent: #a8c962;           /* olive: radio checked state */
  --color-icon: #182f4c;             /* step-icon navy */
  --color-badge: #e91d26;            /* BETA badge red (unused) */

  /* Neutrals */
  --color-white: #ffffff;
  --color-bg: #ffffff;
  --color-bg-layout: rgba(0, 0, 0, 0.04);
  --color-bg-muted: #f9f9f9;
  --color-bg-table-head: #fafafa;
  --color-text: #022041;
  --color-text-secondary: #33475b;
  --color-text-muted: #5c5d62;
  --color-text-grey: #999999;
  --color-text-dark: #2e2925;
  --color-link: #808080;             /* index.less: a { color: grey } */
  --color-link-hover: #003366;
  --color-disabled: #bfbfbf;
  --color-border: #d9d9d9;
  --color-border-light: #e9e9e9;
  --color-border-lighter: #eeeeee;
  --color-border-strong: #5d5e60;
  --color-placeholder: rgba(51, 71, 91, 0.74);

  /* Status */
  --color-success: #52c41a;
  --color-warning: #faad14;
  --color-error: #ff4d4f;
  --color-error-alt: #ff0033;

  /* Fonts */
  --font-body: "Montserrat", "Oswald", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --font-display: "Oswald", "Montserrat", sans-serif;
  --font-script: "Gellatio", "Oswald", sans-serif;   /* archived marketing accent font */

  /* Type scale (styledTheme.ts fontSizes) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 4rem;
  --text-hero: 5rem;
  --leading-body: 1.5715;
  --leading-tight: 1.2;
  --leading-heading: 1.1;
  --tracking-wide: 0.3em;

  /* Spacing scale (styledTheme.ts space[]) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --gutter: 1rem;                    /* mobile page gutter */
  --gutter-desktop: 3rem;
  --header-height: 66px;
  --header-height-mobile: 69px;
  --container: 1200px;               /* no global max-width in app; Divi content width was 1080–1200 */
  --container-narrow: 900px;
  --container-form: 800px;

  /* Breakpoints (for reference; media queries can't use custom properties)
     sm 768px · md 1200px · lg 1500px · nav collapses at 991px */

  /* Radii */
  --radius-sm: 0.125rem;             /* 2px — antd borderRadius, the default everywhere */
  --radius: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-card: 0 -1px 1px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(2, 32, 65, 0.2);       /* "invision" */
  --shadow-card-hover: 0 4px 25px 0 rgba(0, 0, 0, 0.3), 0 0 1px 0 rgba(0, 0, 0, 0.25);    /* "invisionHover" */
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-outline: 0 0 0 3px rgba(66, 153, 225, 0.5);

  /* Controls */
  --control-height: 40px;            /* antd size="large" */
  --control-height-sm: 32px;
  --button-min-width: 200px;
  --input-padding-x: 12px;
  --transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}