/* Trälhavet Technologies — design tokens
   Single source of truth for colour, type, spacing, and motion. */

:root {
  /* === Brand colour ============================================ */
  /* Cold archipelago palette */
  --color-slate:       #1F3A52; /* Primary — text, mark, headings */
  --color-slate-mid:   #3D5C7A; /* Secondary text, subtitles */
  --color-slate-soft:  #889AAE; /* Tertiary text, captions */
  --color-fog-mid:     #C2CDD9; /* Soft borders, dividers */
  --color-fog:         #F4F6F9; /* Page background */
  --color-white:       #FFFFFF;
  --color-beacon:      #D9622F; /* Warm accent — used sparingly */
  --color-beacon-deep: #B8501F; /* Beacon hover/active */

  /* === Semantic roles ========================================== */
  --color-bg:           var(--color-fog);
  --color-bg-card:      var(--color-white);
  --color-text:         var(--color-slate);
  --color-text-muted:   var(--color-slate-mid);
  --color-text-subtle:  var(--color-slate-soft);
  --color-border:       rgba(31, 58, 82, 0.12);
  --color-border-hover: rgba(31, 58, 82, 0.22);
  --color-link:         var(--color-slate);
  --color-link-hover:   var(--color-beacon);

  /* === Typography ============================================== */
  --font-display: Georgia, 'Times New Roman', serif;
  --font-serif:   'IBM Plex Serif', Cambria, Georgia, serif;
  --font-sans:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', Menlo, Consolas, monospace;

  /* Modular scale — ratio ~1.25 */
  --text-xs:   0.75rem;   /* 12px — fine print, captions       */
  --text-sm:   0.875rem;  /* 14px — small body, tagline        */
  --text-base: 1rem;      /* 16px — default body               */
  --text-md:   1.125rem;  /* 18px — lead body                  */
  --text-lg:   1.5rem;    /* 24px — h3                         */
  --text-xl:   2rem;      /* 32px — h2                         */
  --text-2xl:  3rem;      /* 48px — h1                         */
  --text-3xl:  4.5rem;    /* 72px — hero                       */

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.15em;
  --tracking-widest:  0.3em; /* eyebrow / tagline */

  /* === Spacing — base 8px ====================================== */
  --space-1:  0.25rem; /*   4 */
  --space-2:  0.5rem;  /*   8 */
  --space-3:  1rem;    /*  16 */
  --space-4:  1.5rem;  /*  24 */
  --space-5:  2rem;    /*  32 */
  --space-6:  3rem;    /*  48 */
  --space-7:  4rem;    /*  64 */
  --space-8:  6rem;    /*  96 */
  --space-9:  8rem;    /* 128 */
  --space-10: 12rem;   /* 192 */

  /* === Layout ================================================== */
  --content-max:    1200px;
  --content-narrow: 720px; /* hero copy, long-form prose */
  --content-text:   62ch;  /* optimal reading line length */
  --gutter:         var(--space-4);

  /* === Borders & radius ======================================== */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* === Motion ================================================== */
  --ease-out:       cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-soft:  cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  120ms;
  --duration-base:  200ms;
  --duration-slow:  360ms;

  /* === Shadows — slate-tinted to harmonize with palette ======== */
  --shadow-xs:       0 1px 2px rgba(31, 58, 82, 0.04);
  --shadow-sm:       0 1px 3px rgba(31, 58, 82, 0.06), 0 1px 2px rgba(31, 58, 82, 0.04);
  --shadow-md:       0 4px 12px rgba(31, 58, 82, 0.08), 0 1px 3px rgba(31, 58, 82, 0.05);
  --shadow-lg:       0 12px 32px rgba(31, 58, 82, 0.10), 0 4px 8px rgba(31, 58, 82, 0.06);
  --shadow-hover:    0 8px 24px rgba(31, 58, 82, 0.12), 0 2px 6px rgba(31, 58, 82, 0.06);
  --shadow-on-image: 0 8px 32px rgba(0, 0, 0, 0.24), 0 2px 8px rgba(0, 0, 0, 0.16);

  /* === Surface gradients ======================================= */
  --gradient-card:       linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 250, 252, 1) 100%);
  --gradient-card-hover: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(244, 246, 249, 1) 100%);
  --gradient-page:       linear-gradient(180deg, #FFFFFF 0%, var(--color-fog) 360px);
}