/* =========================================================================
   Generated by scripts/brand.mjs from packages/shared/src/theme (tokens.ts,
   themes.ts, fonts.web.ts) and ui/variants.ts. Don't edit it: change the
   shared theme, then run `npm run brand -w @danieru-net/landing`.

   Breakpoints can't be custom properties. styles.css writes them out, and
   the script checks each one is sm 480px, md 768px, lg 1024px.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* palette */
  --palette-indigo-50: #EEF2FF;
  --palette-indigo-100: #E0E7FF;
  --palette-indigo-200: #C7D2FE;
  --palette-indigo-300: #A5B4FC;
  --palette-indigo-400: #818CF8;
  --palette-indigo-500: #6366F1;
  --palette-indigo-600: #4F46E5;
  --palette-indigo-700: #4338CA;
  --palette-indigo-800: #3730A3;
  --palette-indigo-900: #312E81;
  --palette-slate-50: #F8FAFC;
  --palette-slate-100: #F1F5F9;
  --palette-slate-200: #E2E8F0;
  --palette-slate-300: #CBD5E1;
  --palette-slate-400: #94A3B8;
  --palette-slate-500: #64748B;
  --palette-slate-600: #475569;
  --palette-slate-700: #334155;
  --palette-slate-800: #1E293B;
  --palette-slate-900: #0F172A;
  --palette-red-50: #FEF2F2;
  --palette-red-100: #FEE2E2;
  --palette-red-300: #FCA5A5;
  --palette-red-400: #F87171;
  --palette-red-500: #EF4444;
  --palette-red-600: #DC2626;
  --palette-red-700: #B91C1C;
  --palette-red-900: #7F1D1D;
  --palette-green-50: #F0FDF4;
  --palette-green-100: #DCFCE7;
  --palette-green-400: #4ADE80;
  --palette-green-500: #22C55E;
  --palette-green-600: #16A34A;
  --palette-green-700: #15803D;
  --palette-green-900: #14532D;
  --palette-yellow-50: #FEFCE8;
  --palette-yellow-100: #FEF9C3;
  --palette-yellow-400: #FACC15;
  --palette-yellow-500: #EAB308;
  --palette-yellow-600: #CA8A04;
  --palette-yellow-700: #A16207;
  --palette-yellow-800: #854D0E;
  --palette-yellow-900: #713F12;
  --palette-sky-50: #F0F9FF;
  --palette-sky-100: #E0F2FE;
  --palette-sky-300: #7DD3FC;
  --palette-sky-400: #38BDF8;
  --palette-sky-500: #0EA5E9;
  --palette-sky-600: #0284C7;
  --palette-sky-700: #0369A1;
  --palette-sky-900: #0C4A6E;
  --palette-white: #FFFFFF;
  --palette-black: #000000;

  /* spacing */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* radii */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* type */
  --font-family: Poppins, system-ui, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 3rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* shadows (web) */
  --shadow-none: none;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.08);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.12), 0 8px 10px rgba(0,0,0,0.06);

  /* Button (ui/variants.ts) */
  --button-radius: 8px;
  --button-disabled-opacity: 0.6;
  --button-primary-weight: 600;
  --button-primary-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --button-secondary-weight: 500;
  --button-secondary-shadow: none;
  --button-ghost-weight: 500;
  --button-ghost-shadow: none;
  --button-danger-weight: 600;
  --button-danger-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --button-danger-subtle-weight: 600;
  --button-danger-subtle-shadow: none;
  --button-sm-padding: 0.5rem 0.75rem;
  --button-sm-font-size: 0.875rem;
  --button-sm-gap: 0.25rem;
  --button-sm-min-height: 2.25rem;
  --button-md-padding: 0.75rem 1rem;
  --button-md-font-size: 1rem;
  --button-md-gap: 0.5rem;
  --button-md-min-height: 2.75rem;
  --button-lg-padding: 1rem 1.25rem;
  --button-lg-font-size: 1.25rem;
  --button-lg-gap: 0.5rem;
  --button-lg-min-height: 3.25rem;

  /* Card (ui/variants.ts) */
  --card-radius: 16px;
  --card-elevated-shadow: 0 4px 6px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.08);
  --card-outlined-shadow: none;
  --card-subtle-shadow: none;
  --card-padding-sm: 0.75rem;
  --card-padding-md: 1rem;
  --card-padding-lg: 1.5rem;

  /* Badge (ui/variants.ts) */
  --badge-radius: 9999px;
  --badge-sm-padding: 0.25rem 0.5rem;
  --badge-sm-font-size: 0.75rem;
  --badge-md-padding: 0.5rem 0.75rem;
  --badge-md-font-size: 0.875rem;

  /* Input (ui/variants.ts) */
  --input-radius: 8px;

  /* lightTheme */
  --color-bg-default: #F8FAFC;
  --color-bg-subtle: #F1F5F9;
  --color-bg-inverse: #0F172A;
  --color-text-primary: #0F172A;
  --color-text-secondary: #475569;
  --color-text-disabled: #CBD5E1;
  --color-text-inverse: #FFFFFF;
  --color-brand-primary: #4F46E5;
  --color-brand-hover: #4338CA;
  --color-brand-subtle: #EEF2FF;
  --color-status-error: #B91C1C;
  --color-status-error-subtle: #FEF2F2;
  --color-status-success: #15803D;
  --color-status-success-subtle: #F0FDF4;
  --color-status-warning: #854D0E;
  --color-status-warning-subtle: #FEFCE8;
  --color-status-info: #0369A1;
  --color-status-info-subtle: #F0F9FF;
  --color-border-default: #E2E8F0;
  --color-border-strong: #64748B;
  --color-border-focus: #6366F1;
  --color-surface-default: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-overlay: #FFFFFF;
  --button-primary-bg: #4F46E5;
  --button-primary-bg-hover: #4338CA;
  --button-primary-text: #FFFFFF;
  --button-primary-border: none;
  --button-secondary-bg: #FFFFFF;
  --button-secondary-bg-hover: #F1F5F9;
  --button-secondary-text: #0F172A;
  --button-secondary-border: 1px solid #64748B;
  --button-ghost-bg: transparent;
  --button-ghost-bg-hover: #EEF2FF;
  --button-ghost-text: #4F46E5;
  --button-ghost-border: none;
  --button-danger-bg: #B91C1C;
  --button-danger-bg-hover: #B91C1C;
  --button-danger-text: #FFFFFF;
  --button-danger-border: none;
  --button-danger-subtle-bg: #FEF2F2;
  --button-danger-subtle-bg-hover: #FEF2F2;
  --button-danger-subtle-text: #B91C1C;
  --button-danger-subtle-border: none;
  --card-elevated-bg: #FFFFFF;
  --card-elevated-border: 1px solid #E2E8F0;
  --card-outlined-bg: #FFFFFF;
  --card-outlined-border: 1px solid #E2E8F0;
  --card-subtle-bg: #F1F5F9;
  --card-subtle-border: none;
  --input-bg: #F8FAFC;
  --input-border: #64748B;
  --input-border-invalid: #B91C1C;
  --input-text: #0F172A;
  --input-placeholder: #475569;
  --badge-neutral-bg: #F1F5F9;
  --badge-neutral-text: #475569;
  --badge-brand-bg: #EEF2FF;
  --badge-brand-text: #4F46E5;
  --badge-success-bg: #F0FDF4;
  --badge-success-text: #15803D;
  --badge-warning-bg: #FEFCE8;
  --badge-warning-text: #854D0E;
  --badge-error-bg: #FEF2F2;
  --badge-error-text: #B91C1C;
  --badge-info-bg: #F0F9FF;
  --badge-info-text: #0369A1;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* darkTheme */
    --color-bg-default: #0F172A;
    --color-bg-subtle: #1E293B;
    --color-bg-inverse: #F8FAFC;
    --color-text-primary: #F8FAFC;
    --color-text-secondary: #CBD5E1;
    --color-text-disabled: #475569;
    --color-text-inverse: #0F172A;
    --color-brand-primary: #A5B4FC;
    --color-brand-hover: #C7D2FE;
    --color-brand-subtle: #312E81;
    --color-status-error: #FCA5A5;
    --color-status-error-subtle: #7F1D1D;
    --color-status-success: #4ADE80;
    --color-status-success-subtle: #14532D;
    --color-status-warning: #FACC15;
    --color-status-warning-subtle: #713F12;
    --color-status-info: #7DD3FC;
    --color-status-info-subtle: #0C4A6E;
    --color-border-default: #475569;
    --color-border-strong: #94A3B8;
    --color-border-focus: #818CF8;
    --color-surface-default: #1E293B;
    --color-surface-raised: #334155;
    --color-surface-overlay: #1E293B;
    --button-primary-bg: #A5B4FC;
    --button-primary-bg-hover: #C7D2FE;
    --button-primary-text: #0F172A;
    --button-primary-border: none;
    --button-secondary-bg: #334155;
    --button-secondary-bg-hover: #1E293B;
    --button-secondary-text: #F8FAFC;
    --button-secondary-border: 1px solid #94A3B8;
    --button-ghost-bg: transparent;
    --button-ghost-bg-hover: #312E81;
    --button-ghost-text: #A5B4FC;
    --button-ghost-border: none;
    --button-danger-bg: #FCA5A5;
    --button-danger-bg-hover: #FCA5A5;
    --button-danger-text: #0F172A;
    --button-danger-border: none;
    --button-danger-subtle-bg: #7F1D1D;
    --button-danger-subtle-bg-hover: #7F1D1D;
    --button-danger-subtle-text: #FCA5A5;
    --button-danger-subtle-border: none;
    --card-elevated-bg: #334155;
    --card-elevated-border: 1px solid #475569;
    --card-outlined-bg: #1E293B;
    --card-outlined-border: 1px solid #475569;
    --card-subtle-bg: #1E293B;
    --card-subtle-border: none;
    --input-bg: #0F172A;
    --input-border: #94A3B8;
    --input-border-invalid: #FCA5A5;
    --input-text: #F8FAFC;
    --input-placeholder: #CBD5E1;
    --badge-neutral-bg: #1E293B;
    --badge-neutral-text: #CBD5E1;
    --badge-brand-bg: #312E81;
    --badge-brand-text: #A5B4FC;
    --badge-success-bg: #14532D;
    --badge-success-text: #4ADE80;
    --badge-warning-bg: #713F12;
    --badge-warning-text: #FACC15;
    --badge-error-bg: #7F1D1D;
    --badge-error-text: #FCA5A5;
    --badge-info-bg: #0C4A6E;
    --badge-info-text: #7DD3FC;
  }
}