/* ==========================================================================
   hetzhostingline.com — Design Tokens
   Glassmorphism design system. Tokens map to CSS custom properties and
   resolve automatically for light/dark via prefers-color-scheme.
   ========================================================================== */

:root {
  /* ---- Neutral backgrounds ---- */
  --neutral-primary-soft: #FFFFFF;
  --neutral-primary: #FFFFFF;
  --neutral-primary-medium: #FFFFFF;
  --neutral-primary-strong: #FFFFFF;
  --neutral-secondary-soft: #F8FAFB;
  --neutral-secondary: #F8FAFB;
  --neutral-secondary-medium: #F8FAFB;
  --neutral-secondary-strong: #F8FAFB;
  --neutral-tertiary-soft: #F0F3F5;
  --neutral-tertiary: #F0F3F5;
  --neutral-tertiary-medium: #F0F3F5;
  --neutral-quaternary: #E2E7EC;
  --quaternary-medium: #E2E7EC;
  --gray: #CAD1D8;

  /* ---- Brand ---- */
  --brand-softer: #E6FFF3;
  --brand-soft: #B8FFD9;
  --brand: #0EA66D;
  --brand-medium: #B8FFD9;
  --brand-strong: #087A4E;

  /* ---- Status ---- */
  --success-soft: #ECFDF5;
  --success: #007A55;
  --success-medium: #D0FAE5;
  --success-strong: #006045;
  --danger-soft: #FEF0F2;
  --danger: #C70036;
  --danger-medium: #FFE4E6;
  --danger-strong: #A50036;
  --warning-soft: #FFF7ED;
  --warning: #F97316;
  --warning-medium: #FFEDD5;
  --warning-strong: #C2410C;

  /* ---- Button glint ---- */
  --color-1-400: rgba(255, 255, 255, 0.30);
  --color-1-700: rgba(0, 0, 0, 0.08);

  /* ---- Utility ---- */
  --dark: #0F172A;
  --dark-strong: #0B0F19;
  --disabled: #F0F3F5;

  /* ---- Accent ---- */
  --purple: #A78BFA;
  --sky: #38BDF8;
  --teal: #2DD4BF;
  --pink: #F472B6;
  --cyan: #22D3EE;
  --fuchsia: #D946EF;
  --indigo: #818CF8;
  --orange: #FB923C;

  /* ---- Text ---- */
  --white: #FFFFFF;
  --black: #0F172A;
  --heading: #0F172A;
  --body: #475569;
  --body-subtle: #64748B;

  --fg-brand-subtle: #B8FFD9;
  --fg-brand: #0EA66D;
  --fg-brand-strong: #087A4E;

  --fg-success: #047857;
  --fg-success-strong: #065F46;
  --fg-danger: #BE123C;
  --fg-danger-strong: #881337;
  --fg-warning-subtle: #EA580C;
  --fg-warning: #7C2D12;
  --fg-disabled: #94A3B8;

  /* ---- Borders ---- */
  --border-buffer: #FFFFFF;
  --border-default-subtle: #E2E7EC;
  --border-default: #E2E7EC;
  --border-default-medium: #E2E7EC;
  --border-default-strong: #E2E7EC;
  --border-success: #047857;
  --border-success-subtle: #A7F3D0;
  --border-danger: #BE123C;
  --border-danger-subtle: #FECDD3;
  --border-warning: #EA580C;
  --border-brand: #0EA66D;
  --border-brand-subtle: #B8FFD9;

  /* ---- Glassmorphism surfaces ---- */
  --glass-bg: rgba(255, 255, 255, 0.45);
  --glass-bg-hover: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-border-subtle: rgba(0, 0, 0, 0.05);
  --glass-blur: blur(20px);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(255, 255, 255, 0.15);
  --glass-edge-top: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  --glass-edge-left: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent, rgba(255, 255, 255, 0.2));

  /* ---- Shadows ---- */
  --shadow-2xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --shadow-2xl: 0 25px 60px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);

  /* ---- Radius ---- */
  --radius-base: 20px;
  --radius-default: 12px;
  --radius-sm: 8px;
  --radius-full: 9999px;

  /* ---- Page atmosphere (light) ---- */
  --page-bg: #F4F7FA;
  --page-bg-2: #E9F7F0;
  --atmosphere-1: rgba(138, 255, 196, 0.25);
  --atmosphere-2: rgba(56, 189, 248, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* ---- Neutral backgrounds ---- */
    --neutral-primary-soft: #0B0F19;
    --neutral-primary: #060A12;
    --neutral-primary-medium: #141C2E;
    --neutral-primary-strong: #1E293B;
    --neutral-secondary-soft: #0B0F19;
    --neutral-secondary: #060A12;
    --neutral-secondary-medium: #141C2E;
    --neutral-secondary-strong: #1E293B;
    --neutral-tertiary-soft: #0B0F19;
    --neutral-tertiary: #141C2E;
    --neutral-tertiary-medium: #1E293B;
    --neutral-quaternary: #1E293B;
    --quaternary-medium: #2A3650;
    --gray: #2A3650;

    /* ---- Brand ---- */
    --brand-softer: #071F16;
    --brand-soft: #0C3927;
    --brand: #8AFFC4;
    --brand-medium: #0C3927;
    --brand-strong: #6BEFAB;

    /* ---- Status ---- */
    --success-soft: #002C22;
    --success: #009966;
    --success-medium: #004F3B;
    --success-strong: #007A55;
    --danger-soft: #4D0218;
    --danger: #C70036;
    --danger-medium: #8B0836;
    --danger-strong: #A50036;
    --warning-soft: #7C2D12;
    --warning: #F97316;
    --warning-medium: #7C2D12;
    --warning-strong: #C2410C;

    /* ---- Button glint ---- */
    --color-1-400: rgba(255, 255, 255, 0.15);
    --color-1-700: rgba(0, 0, 0, 0.20);

    /* ---- Utility ---- */
    --dark: #0F172A;
    --dark-strong: #1E293B;
    --disabled: #0F172A;

    /* ---- Text ---- */
    --heading: #F0F6FC;
    --body: #94A3B8;
    --body-subtle: #94A3B8;

    --fg-brand-subtle: #0C3927;
    --fg-brand: #8AFFC4;
    --fg-brand-strong: #B8FFD9;

    --fg-success: #065F46;
    --fg-success-strong: #10B981;
    --fg-danger: #F43F5E;
    --fg-danger-strong: #F87171;
    --fg-warning-subtle: #F97316;
    --fg-warning: #FBBF24;
    --fg-disabled: #64748B;

    /* ---- Borders ---- */
    --border-buffer: #060A12;
    --border-default-subtle: #0B0F19;
    --border-default: #0F172A;
    --border-default-medium: #1E293B;
    --border-default-strong: #475569;
    --border-success: #065F46;
    --border-success-subtle: #064E3B;
    --border-danger: #BE123C;
    --border-danger-subtle: #881337;
    --border-warning: #F97316;
    --border-brand: #8AFFC4;
    --border-brand-subtle: #0C3927;

    /* ---- Glassmorphism surfaces ---- */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-bg-hover: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-border-subtle: rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    --glass-edge-top: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    --glass-edge-left: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent, rgba(255, 255, 255, 0.05));

    /* ---- Page atmosphere (dark) ---- */
    --page-bg: #060A12;
    --page-bg-2: #0B0F19;
    --atmosphere-1: rgba(138, 255, 196, 0.16);
    --atmosphere-2: rgba(56, 189, 248, 0.14);
  }
}