/* Angel-Jobs – plain CSS design tokens (no Vite/PostCSS required) */

:root {
  --color-primary:                   #24a0d3;
  --color-on-primary:                #ffffff;
  --color-primary-container:         #24a0d3;
  --color-on-primary-container:      #fefcff;
  --color-primary-fixed:             #d7e3ff;
  --color-primary-fixed-dim:         #abc7ff;
  --color-on-primary-fixed:          #001b3f;
  --color-on-primary-fixed-variant:  #00458e;
  --color-inverse-primary:           #abc7ff;

  --color-secondary:                 #565e74;
  --color-on-secondary:              #ffffff;
  --color-secondary-container:       #dae2fd;
  --color-on-secondary-container:    #5c647a;
  --color-secondary-fixed:           #dae2fd;
  --color-secondary-fixed-dim:       #bec6e0;
  --color-on-secondary-fixed:        #131b2e;
  --color-on-secondary-fixed-variant:#3f465c;

  --color-tertiary:                  #9b4000;
  --color-on-tertiary:               #ffffff;
  --color-tertiary-container:        #c35200;
  --color-on-tertiary-container:     #fffbff;
  --color-tertiary-fixed:            #ffdbcb;
  --color-tertiary-fixed-dim:        #ffb692;
  --color-on-tertiary-fixed:         #341100;
  --color-on-tertiary-fixed-variant: #793000;

  --color-error:                     #ba1a1a;
  --color-on-error:                  #ffffff;
  --color-error-container:           #ffdad6;
  --color-on-error-container:        #93000a;

  --color-background:                #f9f9ff;
  --color-on-background:             #181c23;
  --color-surface:                   #f9f9ff;
  --color-on-surface:                #181c23;
  --color-surface-variant:           #e0e2ec;
  --color-on-surface-variant:        #414754;
  --color-surface-dim:               #d8dae4;
  --color-surface-bright:            #f9f9ff;
  --color-surface-tint:              #005cba;
  --color-surface-subtle:            #F8FAFC;
  --color-surface-container-lowest:  #ffffff;
  --color-surface-container-low:     #f1f3fd;
  --color-surface-container:         #ecedf8;
  --color-surface-container-high:    #e6e8f2;
  --color-surface-container-highest: #e0e2ec;
  --color-inverse-surface:           #2d3038;
  --color-inverse-on-surface:        #eef0fb;

  --color-outline:                   #717785;
  --color-outline-variant:           #c1c6d6;
  --color-border-light:              #E2E8F0;

  --color-warning:                   #F59E0B;
  --color-success:                   #10B981;
  --color-info:                      #0EA5E9;

  /* Spacing */
  --spacing-base:           8px;
  --spacing-gutter:         24px;
  --spacing-card-padding:   24px;
  --spacing-section-gap:    80px;
  --spacing-margin-mobile:  16px;
  --spacing-container-max:  1280px;
}

/* ── Tailwind CDN custom color utilities ── */
/* These map CSS variables to Tailwind-style classes the CDN doesn't know about */

.bg-primary              { background-color: var(--color-primary) !important; }
.bg-primary-container    { background-color: var(--color-primary-container) !important; }
.bg-secondary-container  { background-color: var(--color-secondary-container) !important; }
.bg-error-container      { background-color: var(--color-error-container) !important; }
.bg-surface              { background-color: var(--color-surface) !important; }
.bg-surface-subtle       { background-color: var(--color-surface-subtle) !important; }
.bg-surface-container    { background-color: var(--color-surface-container) !important; }
.bg-surface-container-low     { background-color: var(--color-surface-container-low) !important; }
.bg-surface-container-lowest  { background-color: var(--color-surface-container-lowest) !important; }
.bg-surface-container-high    { background-color: var(--color-surface-container-high) !important; }
.bg-surface-container-highest { background-color: var(--color-surface-container-highest) !important; }
.bg-background           { background-color: var(--color-background) !important; }
.bg-outline-variant      { background-color: var(--color-outline-variant) !important; }

.text-primary            { color: var(--color-primary) !important; }
.text-on-primary         { color: var(--color-on-primary) !important; }
.text-secondary          { color: var(--color-secondary) !important; }
.text-on-secondary       { color: var(--color-on-secondary) !important; }
.text-on-secondary-container { color: var(--color-on-secondary-container) !important; }
.text-on-surface         { color: var(--color-on-surface) !important; }
.text-on-surface-variant { color: var(--color-on-surface-variant) !important; }
.text-on-background      { color: var(--color-on-background) !important; }
.text-on-error-container { color: var(--color-on-error-container) !important; }
.text-error              { color: var(--color-error) !important; }
.text-success            { color: var(--color-success) !important; }
.text-on-primary-container { color: var(--color-on-primary-container) !important; }

.border-primary          { border-color: var(--color-primary) !important; }
.border-outline-variant  { border-color: var(--color-outline-variant) !important; }
.border-outline          { border-color: var(--color-outline) !important; }
.border-error            { border-color: var(--color-error) !important; }
.border-border-light     { border-color: var(--color-border-light) !important; }
.border-primary-container { border-color: var(--color-primary-container) !important; }

.ring-primary            { --tw-ring-color: var(--color-primary) !important; }
.focus\:ring-primary:focus { --tw-ring-color: var(--color-primary) !important; }
.focus\:border-primary:focus { border-color: var(--color-primary) !important; }

/* ── Typography utilities ── */
.font-body-md   { font-family: "Inter", sans-serif; }
.font-body-sm   { font-family: "Inter", sans-serif; }
.font-body-lg   { font-family: "Inter", sans-serif; }
.font-label-md  { font-family: "Inter", sans-serif; }
.font-label-sm  { font-family: "Inter", sans-serif; }
.font-headline-sm  { font-family: "Poppins", sans-serif; }
.font-headline-md  { font-family: "Poppins", sans-serif; }
.font-headline-lg  { font-family: "Poppins", sans-serif; }
.font-headline-xl  { font-family: "Poppins", sans-serif; }
.font-display-lg   { font-family: "Poppins", sans-serif; }

.text-body-md   { font-size: 16px; line-height: 1.6; font-weight: 400; }
.text-body-sm   { font-size: 14px; line-height: 1.5; font-weight: 400; }
.text-body-lg   { font-size: 18px; line-height: 1.6; font-weight: 400; }
.text-label-md  { font-size: 12px; line-height: 1;   font-weight: 600; letter-spacing: 0.05em; }
.text-label-sm  { font-size: 11px; line-height: 1;   font-weight: 500; }
.text-headline-sm  { font-size: 20px; line-height: 1.4; font-weight: 600; }
.text-headline-md  { font-size: 24px; line-height: 1.4; font-weight: 600; }
.text-headline-lg  { font-size: 30px; line-height: 1.3; font-weight: 600; }
.text-headline-xl  { font-size: 36px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.text-display-lg   { font-size: 48px; line-height: 1.2;  font-weight: 700; letter-spacing: -0.02em; }

/* ── Spacing utilities ── */
.p-card-padding  { padding: var(--spacing-card-padding); }
.px-card-padding { padding-left: var(--spacing-card-padding); padding-right: var(--spacing-card-padding); }
.py-section-gap  { padding-top: var(--spacing-section-gap); padding-bottom: var(--spacing-section-gap); }
.mb-section-gap  { margin-bottom: var(--spacing-section-gap); }
.gap-gutter      { gap: var(--spacing-gutter); }
.gap-base        { gap: var(--spacing-base); }
.px-margin-mobile { padding-left: var(--spacing-margin-mobile); padding-right: var(--spacing-margin-mobile); }
.max-w-container-max { max-width: var(--spacing-container-max); }
.space-y-gutter > * + * { margin-top: var(--spacing-gutter); }