@font-face {
  font-family: "Oswald";
  src: url("/fonts/Oswald.otf");
}
@font-face {
  font-family: "Raleway";
  src: url("/fonts/Raleway-Regular.otf");
}
@font-face {
  font-family: "OpenSans";
  src: url("/fonts/OpenSans.otf");
}

:root {
  
  --color-primary: #f36f21;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-page-bg: #f5f5f5;
  --color-heading: #303549;
  --color-text-muted: #888888;
  --color-link-muted: #b1b1b1;
  --color-border: #dcdcdc;
  --color-danger: #ff0000;
  --color-danger-bg: #fff5f2;
  --color-hero-tint: rgba(246, 238, 234, 0.656);


  --color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, var(--color-black));
  --color-primary-shadow: color-mix(in srgb, var(--color-primary) 30%, transparent);
  --color-hero-gradient-end: color-mix(in srgb, var(--color-primary) 78%, transparent);
  --color-logo-glow: color-mix(in srgb, var(--color-white) 51%, transparent);
  --color-text-shadow: color-mix(in srgb, var(--color-black) 40%, transparent);
  --color-shadow-md: color-mix(in srgb, var(--color-black) 10%, transparent);
  --color-shadow-sm: color-mix(in srgb, var(--color-black) 5%, transparent);
  --color-shadow-xs: color-mix(in srgb, var(--color-black) 3%, transparent);
  --color-danger-shadow: color-mix(in srgb, var(--color-danger) 8%, transparent);
  --color-shape-soft: color-mix(in srgb, var(--color-primary) 6%, transparent);   /* page background shapes */
  --color-shape-hero: color-mix(in srgb, var(--color-white) 14%, transparent);    /* ring inside hero panel */

 
  --card-max-width: 1000px;
  --card-min-height: 600px;
  --card-radius: 24px;
  --panel-pad-y: 44px;
  --panel-pad-x: 52px;
  --field-height: 52px;
  --field-radius: 10px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}