/* ==========================================================================
   Translayte — Design Tokens
   Source: Translayte Brand Guidelines v1 (10 June 2018)
   ========================================================================== */

/* ---------- Webfonts -------------------------------------------------- */

@font-face {
  font-family: "Open Sans";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/OpenSans-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/OpenSans-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/OpenSans-SemiBold.woff2") format("woff2");
}

:root {
  /* ---------- Color: Primary Palette ---------------------------------- */

  /* Cerulean — primary brand navy */
  --tl-cerulean:           #00303F; /*  base                         */
  --tl-cerulean-20b:       #015B71; /* +20% B — mid                  */
  --tl-cerulean-40b:       #0284A4; /* +40% B — accent / link tone   */

  /* Honey — primary accent yellow */
  --tl-honey:              #DCAE1D;
  --tl-honey-10b:          #F4BD22; /* +10% B — bright highlight     */
  --tl-honey-d10:          #C19518; /* -10% B — pressed / aged       */

  /* Grey — neutral */
  --tl-grey:               #DDDDDD;
  --tl-grey-d10:           #BFBFBF;
  --tl-grey-d20:           #A8A7A7;

  /* ---------- Color: Extended neutrals (derived) ---------------------- */
  /* Built around Cerulean so neutrals feel cool, not warm-grey.        */
  --tl-ink:                #00303F;            /* alias for cerulean   */
  --tl-ink-2:              #1F4A57;            /* secondary text       */
  --tl-ink-3:              #4A6770;            /* muted text           */
  --tl-line:               #E4E7EA;            /* hairline borders     */
  --tl-line-strong:        #C9D1D6;            /* divider              */
  --tl-paper:              #FFFFFF;            /* surface              */
  --tl-paper-2:            #F6F7F8;            /* subtle surface       */
  --tl-paper-3:            #ECEEF0;            /* sunken surface       */

  /* ---------- Color: Semantic ---------------------------------------- */
  --tl-success:            #1F8A4C;
  --tl-success-soft:       #E5F4EC;
  --tl-warning:            #C19518;            /* honey-d10            */
  --tl-warning-soft:       #FBF1D2;
  --tl-danger:             #B0263B;
  --tl-danger-soft:        #FBE6E9;
  --tl-info:               #0284A4;            /* cerulean-40b         */
  --tl-info-soft:           #E0F2F7;

  /* ---------- Color: Roles (semantic) -------------------------------- */
  --tl-bg:                 var(--tl-paper);
  --tl-bg-muted:           var(--tl-paper-2);
  --tl-bg-inverse:         var(--tl-cerulean);
  --tl-fg:                 var(--tl-ink);
  --tl-fg-2:               var(--tl-ink-2);
  --tl-fg-3:               var(--tl-ink-3);
  --tl-fg-on-dark:         #FFFFFF;
  --tl-fg-on-dark-2:       #C9D9DE;
  --tl-accent:             var(--tl-honey);
  --tl-accent-strong:      var(--tl-honey-d10);
  --tl-link:               var(--tl-cerulean-40b);
  --tl-focus-ring:         color-mix(in oklch, var(--tl-honey) 70%, white);

  /* ---------- Type: families ---------------------------------------- */
  --tl-font-sans: "Open Sans", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Helvetica, Arial, sans-serif;
  --tl-font-mono: ui-monospace, "SF Mono", "Cascadia Mono",
                  "Roboto Mono", Menlo, Consolas, monospace;

  /* ---------- Type: weights ----------------------------------------- */
  --tl-w-light: 300;       /* @kind font */
  --tl-w-regular: 400;     /* @kind font */
  --tl-w-semibold: 600;    /* @kind font */

  /* ---------- Type: scale (rem-based, 16px root) -------------------- */
  --tl-fs-display: 64px;   /* hero  — Light             */
  --tl-fs-h1:      48px;
  --tl-fs-h2:      36px;
  --tl-fs-h3:      28px;
  --tl-fs-h4:      22px;
  --tl-fs-h5:      18px;
  --tl-fs-body-lg: 18px;
  --tl-fs-body:    16px;
  --tl-fs-small:   14px;
  --tl-fs-micro:   12px;

  --tl-lh-tight: 1.12;     /* @kind font */
  --tl-lh-snug:  1.25;     /* @kind font */
  --tl-lh-body:  1.55;     /* @kind font */
  --tl-lh-loose: 1.7;      /* @kind font */

  --tl-ls-tight:  -0.01em; /* @kind font */
  --tl-ls-normal:  0;      /* @kind font */
  --tl-ls-caps:    0.08em; /* @kind font */

  /* ---------- Spacing (4-px base) ------------------------------------ */
  --tl-s-1:  4px;
  --tl-s-2:  8px;
  --tl-s-3:  12px;
  --tl-s-4:  16px;
  --tl-s-5:  24px;
  --tl-s-6:  32px;
  --tl-s-7:  48px;
  --tl-s-8:  64px;
  --tl-s-9:  96px;
  --tl-s-10:128px;

  /* ---------- Radii -------------------------------------------------- */
  --tl-r-sm: 4px;
  --tl-r-md: 6px;
  --tl-r-lg: 10px;
  --tl-r-xl: 16px;
  --tl-r-pill: 999px;

  /* ---------- Shadows (cool, sit on cerulean palette) ---------------- */
  --tl-sh-1: 0 1px 2px rgba(0, 48, 63, .08);
  --tl-sh-2: 0 4px 12px rgba(0, 48, 63, .10), 0 1px 2px rgba(0, 48, 63, .06);
  --tl-sh-3: 0 12px 32px rgba(0, 48, 63, .14), 0 2px 6px rgba(0, 48, 63, .06);
  --tl-sh-honey: 0 6px 20px rgba(220, 174, 29, .35);

  /* ---------- Motion ------------------------------------------------- */
  --tl-ease: cubic-bezier(.2, .7, .2, 1);  /* @kind other */
  --tl-dur-fast: 120ms;                    /* @kind other */
  --tl-dur:      200ms;                    /* @kind other */
  --tl-dur-slow: 320ms;                    /* @kind other */

  /* ---------- Layout ------------------------------------------------- */
  --tl-container: 1200px;                  /* @kind spacing */
  --tl-container-narrow: 880px;            /* @kind spacing */
}

/* ==========================================================================
   Semantic element styles (drop-in)
   ========================================================================== */

.tl, .tl * { box-sizing: border-box; }

.tl {
  font-family: var(--tl-font-sans);
  color: var(--tl-fg);
  background: var(--tl-bg);
  font-size: var(--tl-fs-body);
  line-height: var(--tl-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tl-display {
  font-weight: var(--tl-w-light);
  font-size: var(--tl-fs-display);
  line-height: var(--tl-lh-tight);
  letter-spacing: var(--tl-ls-tight);
  color: var(--tl-fg);
}

.tl-h1 { font-weight: var(--tl-w-semibold); font-size: var(--tl-fs-h1); line-height: var(--tl-lh-tight);  letter-spacing: var(--tl-ls-tight); }
.tl-h2 { font-weight: var(--tl-w-semibold); font-size: var(--tl-fs-h2); line-height: var(--tl-lh-snug);   letter-spacing: var(--tl-ls-tight); }
.tl-h3 { font-weight: var(--tl-w-semibold); font-size: var(--tl-fs-h3); line-height: var(--tl-lh-snug);   }
.tl-h4 { font-weight: var(--tl-w-semibold); font-size: var(--tl-fs-h4); line-height: var(--tl-lh-snug);   }
.tl-h5 { font-weight: var(--tl-w-semibold); font-size: var(--tl-fs-h5); line-height: var(--tl-lh-snug);   }

.tl-eyebrow {
  font-size: var(--tl-fs-micro);
  font-weight: var(--tl-w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tl-ls-caps);
  color: var(--tl-honey-d10);
}

.tl-body  { font-size: var(--tl-fs-body);    line-height: var(--tl-lh-body); color: var(--tl-fg-2); }
.tl-lede  { font-size: var(--tl-fs-body-lg); line-height: var(--tl-lh-body); color: var(--tl-fg-2); }
.tl-small { font-size: var(--tl-fs-small);   line-height: var(--tl-lh-body); color: var(--tl-fg-3); }
.tl-micro { font-size: var(--tl-fs-micro);   line-height: var(--tl-lh-body); color: var(--tl-fg-3); }

.tl-link {
  color: var(--tl-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--tl-dur) var(--tl-ease);
}
.tl-link:hover { color: var(--tl-cerulean); }