/* =========================================================================
   Sicosa Energy — Colors & Type Tokens
   Reference: BRAND.md + sicosaenergy.am
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* -----------------------------------------------------------------------
     CORE BRAND COLORS
  ----------------------------------------------------------------------- */
  --color-dragonfly:        #2c4975; /* primary navy   — headers, footers, dark sections */
  --color-klaxosaur:        #2a88c1; /* accent sky     — buttons, links, icons */
  --color-limousine:        #3b3c3b; /* graphite       — neutral, diesel */

  /* Navy scale (primary blue) */
  --navy-50:  #eef2f9;
  --navy-100: #d4ddee;
  --navy-200: #a8bbdc;
  --navy-300: #7c98ca;
  --navy-400: #5176b8;
  --navy-500: #2c4975;
  --navy-600: #243b5e;
  --navy-700: #1c2e48;
  --navy-800: #142031;
  --navy-900: #0b121b;

  /* Sky scale (accent blue) */
  --sky-50:  #eaf4fa;
  --sky-100: #c8e2f0;
  --sky-200: #94c5e2;
  --sky-300: #5fa9d3;
  --sky-400: #2a88c1;
  --sky-500: #226e9c;
  --sky-600: #1a5577;
  --sky-700: #133d56;
  --sky-800: #0c2536;

  /* -----------------------------------------------------------------------
     SURFACES
  ----------------------------------------------------------------------- */
  --bg-page:          #f7f8fa;
  --bg-surface:       #ffffff;
  --bg-dark:          #142031;
  --bg-tint-sky:      #eaf4fa;
  --bg-tint-navy:     #eef2f9;
  --bg-grid-line:     rgba(20, 32, 49, 0.06);

  /* -----------------------------------------------------------------------
     TEXT — semantic
  ----------------------------------------------------------------------- */
  --fg-1:             #1d1e1d; /* primary copy */
  --fg-2:             #525352; /* secondary */
  --fg-3:             #9b9c9b; /* tertiary, placeholder */
  --fg-on-dark:       #ffffff;
  --fg-on-dark-2:     rgba(255,255,255,0.72);
  --fg-on-dark-3:     rgba(255,255,255,0.48);
  --fg-brand:         #2c4975;
  --fg-accent:        #2a88c1;
  --fg-link:          #2a88c1;
  --fg-link-hover:    #226e9c;

  /* -----------------------------------------------------------------------
     BORDERS / DIVIDERS
  ----------------------------------------------------------------------- */
  --border-1:         rgba(20, 32, 49, 0.08);   /* hairline */
  --border-2:         rgba(20, 32, 49, 0.14);   /* default */
  --border-3:         rgba(20, 32, 49, 0.24);   /* emphasis */
  --border-on-dark:   rgba(255, 255, 255, 0.10);
  --border-on-dark-2: rgba(255, 255, 255, 0.18);

  /* -----------------------------------------------------------------------
     PRODUCT COLORS — used in infographics, product cards, badges
  ----------------------------------------------------------------------- */
  --product-ai80:     #c98a17; /* amber       — AI-80 */
  --product-ai92:     #2f7d4f; /* green       — AI-92 */
  --product-ai95:     #2a88c1; /* sky         — AI-95 */
  --product-ai98:     #2c4975; /* navy        — AI-98 */
  --product-diesel:   #3b3c3b; /* graphite    — Diesel */
  --product-lpg:      #226e9c; /* deep sky    — LPG / СПБТ */
  --product-jet:      #5176b8; /* steel blue  — Jet A-1 */
  --product-mazut:    #1d1e1d; /* near-black  — Heavy fuel oil */
  --product-bitumen:  #525352; /* dark grey   — Bitumen */

  /* -----------------------------------------------------------------------
     STATUS
  ----------------------------------------------------------------------- */
  --status-success:   #2f7d4f;
  --status-warning:   #c98a17;
  --status-error:     #b3422f;
  --status-info:      #2a88c1;

  --status-success-bg: #e8f3ec;
  --status-warning-bg: #faefd9;
  --status-error-bg:   #f6e2dd;
  --status-info-bg:    #eaf4fa;

  /* -----------------------------------------------------------------------
     TYPE — families & roles
  ----------------------------------------------------------------------- */
  --font-display: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
  --font-sans:    'Inter', 'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (px) */
  --fs-display-1: 88px;  /* hero H1 */
  --fs-display-2: 64px;  /* section title */
  --fs-h1:        48px;
  --fs-h2:        36px;
  --fs-h3:        28px;
  --fs-h4:        22px;
  --fs-h5:        18px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   12px;
  --fs-eyebrow:   11px;

  /* Line heights */
  --lh-display:  1.04;
  --lh-tight:    1.15;
  --lh-snug:     1.3;
  --lh-body:     1.55;
  --lh-loose:    1.7;

  /* Tracking */
  --tr-tight:   -0.03em;
  --tr-snug:    -0.015em;
  --tr-normal:  0;
  --tr-wide:    0.04em;
  --tr-eyebrow: 0.16em;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  /* -----------------------------------------------------------------------
     SPACING (4px grid)
  ----------------------------------------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* -----------------------------------------------------------------------
     RADII
  ----------------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* -----------------------------------------------------------------------
     SHADOWS — calm, technical, low spread
  ----------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(20, 32, 49, 0.04);
  --shadow-sm: 0 1px 3px rgba(20, 32, 49, 0.06), 0 1px 2px rgba(20, 32, 49, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 32, 49, 0.07), 0 1px 3px rgba(20, 32, 49, 0.04);
  --shadow-lg: 0 12px 32px rgba(20, 32, 49, 0.10), 0 4px 8px rgba(20, 32, 49, 0.04);
  --shadow-xl: 0 24px 60px rgba(20, 32, 49, 0.14), 0 8px 16px rgba(20, 32, 49, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(20,32,49,0.04);

  /* -----------------------------------------------------------------------
     MOTION
  ----------------------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:cubic-bezier(0.34, 1.34, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
  --dur-marquee: 28s;

  /* -----------------------------------------------------------------------
     LAYOUT
  ----------------------------------------------------------------------- */
  --container-max: 1280px;
  --container-narrow: 960px;
  --gutter: 24px;
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   Apply via class .ds-h1 etc, or use as references for components.
   ========================================================================= */
.ds-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}
.ds-display-1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-display);
  color: var(--fg-1);
}
.ds-display-2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-display);
  color: var(--fg-1);
}
.ds-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-snug);
  line-height: var(--lh-tight);
  color: var(--fg-1);
}
.ds-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-snug);
  line-height: var(--lh-tight);
  color: var(--fg-1);
}
.ds-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-snug);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.ds-h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.ds-h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.ds-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.ds-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.ds-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.ds-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}
.ds-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  color: var(--fg-1);
}
.ds-mono-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--sky-400);
}
.ds-numerator { /* step numbers e.g. 01, 02, 03 */
  font-family: var(--font-mono);
  font-size: 56px;
  font-weight: var(--fw-medium);
  color: var(--navy-200);
  letter-spacing: -0.02em;
}
.ds-ticker {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--fg-on-dark);
}