/* ============================================================
   Hostinger Design System — Colors & Type
   Source: Figma "Figma design system.fig" (Page-1)
   Token prefix: --h-*  (matches the Figma variables)
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300; src: url("./fonts/DMSans-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "DM Sans"; font-style: italic; font-weight: 400; src: url("./fonts/DMSans-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; src: url("./fonts/DMSans-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; src: url("./fonts/DMSans-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; src: url("./fonts/DMSans-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; src: url("./fonts/DMSans-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 800; src: url("./fonts/DMSans-ExtraBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 900; src: url("./fonts/DMSans-Black.ttf") format("truetype"); font-display: swap; }

:root {
  /* ============ PRIMITIVE COLOR SCALES ============ */

  /* Brand (Purple) — primary-500 rgb(103,61,230) is the signature brand color (used 3449×). */
  --h-primary-50:  #F5F1FF;
  --h-primary-100: #EBE4FF;          /* rgb(235,228,255) — lightest brand tint */
  --h-primary-200: #D8C8FF;
  --h-primary-300: #B39EF3;          /* rgb(179,158,243) — brand soft */
  --h-primary-400: #9747FF;          /* rgb(151,71,255) — brand bright */
  --h-primary-500: #673DE6;          /* rgb(103,61,230) — PRIMARY BRAND */
  --h-primary-600: #5A33D1;
  --h-primary-700: #4A27B3;          /* hover */
  --h-primary-800: #3A1F8C;
  --h-primary-900: #261254;

  /* Neutrals — grayscale driven by neutral-900 rgb(24,24,26) & neutral-1000 rgb(0,0,0) */
  --h-neutral-0:    #FFFFFF;
  --h-neutral-50:   #F8F9FA;         /* rgb(248,249,250) */
  --h-neutral-100:  #F0F0F0;         /* rgb(240,240,240) */
  --h-neutral-200:  #DADCE0;         /* rgb(218,220,224) */
  --h-neutral-300:  #D9D9D9;
  --h-neutral-400:  #9D9EA4;         /* rgb(157,158,164) */
  --h-neutral-500:  #797980;         /* rgb(121,121,128) */
  --h-neutral-600:  #727586;         /* rgb(114,117,134) */
  --h-neutral-700:  #58585E;         /* rgb(88,88,94) */
  --h-neutral-800:  #36344D;         /* rgb(54,52,77) */
  --h-neutral-900:  #18181A;         /* rgb(24,24,26) — PRIMARY FG */
  --h-neutral-950:  #1D1E20;         /* rgb(29,30,32) */
  --h-neutral-1000: #000000;

  /* Danger (Red) — danger-500 rgb(216,0,39) */
  --h-danger-400: #E73A47;
  --h-danger-500: #D80027;           /* rgb(216,0,39) */
  --h-danger-600: #BC0022;
  --h-danger-700: #A80030;           /* rgb(168,0,48) */
  --h-danger-800: #7A0020;

  /* Success (Green) — success-500 rgb(0,158,91) */
  --h-success-400: #6DA544;          /* rgb(109,165,68) — softer */
  --h-success-500: #009E5B;          /* rgb(0,158,91) */
  --h-success-600: #008049;
  --h-success-700: #006233;          /* rgb(0,98,51) */

  /* Warning (Amber/Gold) — warning-500 rgb(247,198,8) */
  --h-warning-400: #FFDA44;          /* rgb(255,218,68) */
  --h-warning-500: #F7C608;          /* rgb(247,198,8) */
  --h-warning-600: #ECA93F;          /* rgb(236,169,63) */
  --h-warning-700: #B88800;
  --h-warning-800: #6B5200;

  /* Info (Blue) — accent */
  --h-info-400: #338AF3;             /* rgb(51,138,243) */
  --h-info-500: #2E93EE;             /* rgb(46,147,238) */
  --h-info-600: #0052B4;             /* rgb(0,82,180) */
  --h-info-700: #2E578B;             /* rgb(46,87,139) */

  /* Alpha / translucency tokens (tint overlays from tokens sheet) */
  --h-dark-a5:    rgba(0,0,0,0.05);
  --h-dark-a10:   rgba(0,0,0,0.10);
  --h-dark-a15:   rgba(0,0,0,0.15);
  --h-dark-a80:   rgba(0,0,0,0.80);
  --h-light-a5:   rgba(255,255,255,0.05);
  --h-light-a10:  rgba(255,255,255,0.10);
  --h-light-a15:  rgba(255,255,255,0.15);
  --h-light-a80:  rgba(255,255,255,0.80);

  /* ============ SEMANTIC — BACKGROUND ============ */
  --h-bg-neutral-default:          var(--h-neutral-0);
  --h-bg-neutral-secondary:        var(--h-neutral-50);
  --h-bg-neutral-surface:          var(--h-dark-a5);   /* subtle panel */
  --h-bg-neutral-elevated:         var(--h-neutral-0); /* popovers, dropdowns */
  --h-bg-neutral-hover:            var(--h-dark-a10);
  --h-bg-neutral-disabled:         var(--h-dark-a5);

  --h-bg-neutral-inverse-default:  var(--h-neutral-900);
  --h-bg-neutral-inverse-hover:    rgba(24,24,26,0.80);
  --h-bg-neutral-inverse-disabled: var(--h-dark-a5);

  --h-bg-brand-default:            var(--h-primary-500);
  --h-bg-brand-secondary:          var(--h-primary-100);
  --h-bg-brand-hover:              var(--h-primary-700);
  --h-bg-brand-disabled:           var(--h-dark-a5);

  --h-bg-danger-default:           var(--h-danger-500);
  --h-bg-danger-secondary:         #FCE6E9;
  --h-bg-danger-hover:             var(--h-danger-700);
  --h-bg-danger-disabled:          var(--h-dark-a5);

  --h-bg-success-default:          var(--h-success-500);
  --h-bg-success-secondary:        #E3F6ED;
  --h-bg-success-hover:            var(--h-success-700);

  --h-bg-warning-default:          var(--h-warning-500);
  --h-bg-warning-secondary:        #FEF6D6;
  --h-bg-warning-hover:            var(--h-warning-700);

  /* ============ SEMANTIC — FOREGROUND ============ */
  --h-fg-neutral-default:          var(--h-neutral-900);   /* default text/icon on light */
  --h-fg-neutral-secondary:        var(--h-neutral-700);   /* subtle */
  --h-fg-neutral-tertiary:         var(--h-neutral-600);
  --h-fg-neutral-hover:            var(--h-neutral-1000);
  --h-fg-neutral-disabled:         var(--h-neutral-400);

  --h-fg-neutral-inverse-default:  var(--h-neutral-50);    /* on dark */
  --h-fg-neutral-inverse-secondary:var(--h-neutral-400);
  --h-fg-neutral-inverse-hover:    var(--h-neutral-0);
  --h-fg-neutral-inverse-disabled: var(--h-neutral-500);

  --h-fg-brand-default:            var(--h-primary-500);
  --h-fg-brand-secondary:          var(--h-primary-500);
  --h-fg-brand-hover:              var(--h-primary-700);
  --h-fg-brand-disabled:           var(--h-neutral-400);

  --h-fg-danger-default:           var(--h-danger-500);
  --h-fg-danger-hover:             var(--h-danger-700);
  --h-fg-success-default:          var(--h-success-500);
  --h-fg-success-hover:            var(--h-success-700);
  --h-fg-warning-default:          var(--h-warning-700);
  --h-fg-warning-hover:            var(--h-warning-800);

  /* On-color foregrounds (for colored bgs) */
  --h-fg-on-brand:                 var(--h-neutral-0);
  --h-fg-on-danger:                var(--h-neutral-0);
  --h-fg-on-success:               var(--h-neutral-0);
  --h-fg-on-warning:               var(--h-neutral-900);

  /* ============ SEMANTIC — STROKE ============ */
  --h-stroke-default:  var(--h-dark-a10);
  --h-stroke-subtle:   var(--h-dark-a5);
  --h-stroke-strong:   var(--h-neutral-900);
  --h-stroke-brand:    var(--h-primary-500);
  --h-stroke-success:  var(--h-success-500);
  --h-stroke-danger:   var(--h-danger-500);
  --h-stroke-warning:  var(--h-warning-500);
  --h-stroke-focus:    var(--h-primary-500);

  /* Inverse strokes (on dark backgrounds) */
  --h-stroke-inverse-default: var(--h-light-a10);
  --h-stroke-inverse-subtle:  var(--h-light-a5);

  /* ============ SPACING ============
     From /Page-1/Spacing — based on 4px rhythm */
  --h-spacing-3xs: 2px;
  --h-spacing-2xs: 4px;
  --h-spacing-xs:  8px;
  --h-spacing-sm:  12px;
  --h-spacing-md:  16px;
  --h-spacing-md-alt: 20px;
  --h-spacing-lg:  24px;
  --h-spacing-xl:  32px;
  --h-spacing-2xl: 48px;
  --h-spacing-3xl: 64px;
  --h-spacing-4xl: 80px;

  /* ============ BORDER RADIUS ============ */
  --h-border-radius-sm:     8px;
  --h-border-radius-md:     12px;
  --h-border-radius-lg:     16px;
  --h-border-radius-lg-alt: 20px;
  --h-border-radius-xl:     24px;
  --h-border-radius-2xl:    32px;
  --h-border-radius-full:   9999px;

  /* ============ ELEVATION / SHADOWS ============
     Derived from /Page-1/Example2-5 Desktop frames. */
  --h-shadow-1: 0 0 0 1px rgba(0,0,0,0.02), 0 2px 6px rgba(0,0,0,0.06);                       /* low */
  --h-shadow-2: 0 0 0 1px rgba(0,0,0,0.02), 0 6px 16px rgba(0,0,0,0.08);                      /* popover/dropdown */
  --h-shadow-3: 0 0 0 1px rgba(0,0,0,0.02), 0 8px 24px rgba(0,0,0,0.12);                      /* card */
  --h-shadow-4: 0 0 0 1px rgba(0,0,0,0.02), 0 2px 16px rgba(0,0,0,0.12);                      /* surface */
  --h-shadow-5: 0 24px 64px -8px rgba(24,24,26,0.18);                                         /* dialog */
  --h-shadow-focus: 0 0 0 3px rgba(103,61,230,0.25);

  /* ============ GRADIENTS ============ */
  --h-gradient-ai: linear-gradient(135deg, #673DE6 0%, #9747FF 45%, #E73A47 100%);
  --h-gradient-brand: linear-gradient(135deg, #4A27B3 0%, #673DE6 50%, #9747FF 100%);
  --h-gradient-page: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%);

  /* ============ TYPE — FAMILY & WEIGHTS ============ */
  --h-font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --h-font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --h-font-weight-regular:   400;
  --h-font-weight-medium:    500;
  --h-font-weight-semibold:  600;
  --h-font-weight-bold:      700;
  --h-font-weight-extrabold: 800;
  --h-font-weight-black:     900;

  /* ============ TYPE — TOKEN SCALE ============
     Sizes used in the Figma file. Weight SemiBold (600) and Bold (700) dominate; Black (900) for display. */
  --h-font-size-display-2xl: 88px;   /* hero labels ("icons 2.0") */
  --h-font-size-display-xl:  72px;
  --h-font-size-display-lg:  64px;   /* page title */
  --h-font-size-display-md:  48px;
  --h-font-size-display-sm:  36px;
  --h-font-size-h1: 32px;
  --h-font-size-h2: 24px;
  --h-font-size-h3: 20px;
  --h-font-size-h4: 18px;
  --h-font-size-body:   16px;
  --h-font-size-sm:     14px;
  --h-font-size-xs:     12px;
  --h-font-size-micro:  10px;

  --h-line-height-tight: 1.0;
  --h-line-height-snug:  1.15;
  --h-line-height-base:  1.5;
  --h-line-height-body:  1.45;

  --h-letter-spacing-tight: -0.01em;
  --h-letter-spacing-snug:  -0.005em;
  --h-letter-spacing-normal: 0;
  --h-letter-spacing-wide:  0.02em;
}

/* ============================================================
   SEMANTIC CSS — apply the tokens
   ============================================================ */
html, body {
  font-family: var(--h-font-sans);
  color: var(--h-fg-neutral-default);
  background: var(--h-bg-neutral-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h-h1 {
  font-family: var(--h-font-sans);
  font-weight: var(--h-font-weight-bold);
  font-size: var(--h-font-size-display-lg);
  line-height: 72px;
  letter-spacing: var(--h-letter-spacing-tight);
  color: var(--h-fg-neutral-default);
  margin: 0;
}
h2, .h-h2 {
  font-family: var(--h-font-sans);
  font-weight: var(--h-font-weight-bold);
  font-size: var(--h-font-size-display-md);
  line-height: 56px;
  letter-spacing: var(--h-letter-spacing-snug);
  margin: 0;
}
h3, .h-h3 {
  font-family: var(--h-font-sans);
  font-weight: var(--h-font-weight-bold);
  font-size: var(--h-font-size-h1);
  line-height: 40px;
  margin: 0;
}
h4, .h-h4 {
  font-family: var(--h-font-sans);
  font-weight: var(--h-font-weight-semibold);
  font-size: var(--h-font-size-h2);
  line-height: 32px;
  margin: 0;
}
h5, .h-h5 {
  font-family: var(--h-font-sans);
  font-weight: var(--h-font-weight-semibold);
  font-size: var(--h-font-size-h3);
  line-height: 28px;
  margin: 0;
}

.h-display {
  font-weight: var(--h-font-weight-black);
  font-size: var(--h-font-size-display-2xl);
  line-height: 92px;
  letter-spacing: -0.02em;
  color: var(--h-fg-neutral-default);
}

.h-body, p {
  font-size: var(--h-font-size-body);
  line-height: 24px;
  color: var(--h-fg-neutral-default);
}
.h-body-sm {
  font-size: var(--h-font-size-sm);
  line-height: 20px;
  color: var(--h-fg-neutral-secondary);
}
.h-body-xs, small {
  font-size: var(--h-font-size-xs);
  line-height: 16px;
  color: var(--h-fg-neutral-secondary);
}
.h-label {
  font-size: var(--h-font-size-sm);
  font-weight: var(--h-font-weight-semibold);
  line-height: 20px;
  color: var(--h-fg-neutral-default);
}
.h-eyebrow {
  font-size: var(--h-font-size-xs);
  font-weight: var(--h-font-weight-bold);
  letter-spacing: var(--h-letter-spacing-wide);
  text-transform: uppercase;
  color: var(--h-fg-neutral-secondary);
}
code, .h-code {
  font-family: var(--h-font-mono);
  font-size: var(--h-font-size-sm);
  background: var(--h-bg-neutral-surface);
  padding: 2px 6px;
  border-radius: var(--h-border-radius-sm);
  color: var(--h-fg-neutral-default);
}

a { color: var(--h-fg-brand-default); text-decoration: none; }
a:hover { color: var(--h-fg-brand-hover); text-decoration: underline; }

/* ============================================================
   Utility helpers matching Hostinger structure
   ============================================================ */
.h-card {
  background: var(--h-bg-neutral-default);
  border-radius: var(--h-border-radius-lg);
  box-shadow: var(--h-shadow-3);
}
.h-surface {
  background: var(--h-bg-neutral-secondary);
  border-radius: var(--h-border-radius-lg);
}
.h-hr {
  height: 1px;
  background: var(--h-stroke-default);
  border: 0;
}