/* fonts */
@font-face { font-family: "Nuckle"; font-weight: 100; font-style: normal; font-display: swap; src: url("fonts/Nuckle-Thin.ttf") format("truetype"); }
@font-face { font-family: "Nuckle"; font-weight: 200; font-style: normal; font-display: swap; src: url("fonts/Nuckle-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Nuckle"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/Nuckle-Light.ttf") format("truetype"); }
@font-face { font-family: "Nuckle"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/Nuckle-Medium.ttf") format("truetype"); }

/* colors */
:root {
  /* Core brand — Invest Timor-Leste Quick Start Guide p.6 */
  --itl-red: #C1272D;
  --itl-yellow: #FFC72C;
  --itl-black: #000000;
  --itl-white: #FFFFFF;

  /* Sector colours — guide p.6 */
  --sector-tourism: #087F8C;
  --sector-energy: #D99516;
  --sector-agriculture: #508447;

  /* Derived tints (system additions; not in guide) */
  --itl-red-dark: #9E1F24;
  --itl-red-tint: #F9E9EA;
  --itl-yellow-tint: #FFF6DC;
  --sector-tourism-tint: #E3F1F2;
  --sector-energy-tint: #FBF0DC;
  --sector-agriculture-tint: #E8F0E6;

  /* Neutral scale — warm-neutral greys built off black (system additions) */
  --grey-900: #1A1A1A;
  --grey-800: #333333;
  --grey-700: #4D4D4D;
  --grey-600: #666666;
  --grey-500: #808080;
  --grey-400: #A6A6A6;
  --grey-300: #CCCCCC;
  --grey-200: #E5E5E5;
  --grey-100: #F2F2F2;
  --grey-50:  #F8F8F8;

  /* Semantic — text */
  --text-primary: var(--itl-black);
  --text-secondary: var(--grey-700);
  --text-muted: var(--grey-500);
  --text-inverse: var(--itl-white);
  --text-accent: var(--itl-red);
  --text-link: var(--itl-red);
  --text-link-hover: var(--itl-red-dark);

  /* Semantic — surfaces */
  --surface-page: var(--itl-white);
  --surface-subtle: var(--grey-50);
  --surface-card: var(--itl-white);
  --surface-inverse: var(--itl-black);
  --surface-brand: var(--itl-red);
  --surface-highlight: var(--itl-yellow);

  /* Semantic — borders */
  --border-default: var(--grey-200);
  --border-strong: var(--grey-900);
  --border-focus: var(--itl-red);

  /* Semantic — interactive */
  --action-primary: var(--itl-red);
  --action-primary-hover: var(--itl-red-dark);
  --action-primary-text: var(--itl-white);
  --action-secondary: var(--itl-black);
  --action-secondary-hover: var(--grey-800);
  --action-secondary-text: var(--itl-white);

  /* Semantic — status (system additions; reuse brand where possible) */
  --status-success: var(--sector-agriculture);
  --status-warning: var(--sector-energy);
  --status-error: var(--itl-red);
  --status-info: var(--sector-tourism);
}

/* typography */
:root {
  /* Nuckle is the only brand face. Arial is the sanctioned fallback (guide p.5). */
  --font-brand: "Nuckle", Arial, Helvetica, sans-serif;
  --font-body: var(--font-brand);
  --font-display: var(--font-brand);

  /* Weights — the four supplied cuts */
  --weight-thin: 100;        /* large, short text only */
  --weight-extralight: 200;  /* large, short text only */
  --weight-light: 300;       /* titles and general text */
  --weight-medium: 500;      /* emphasis, subheadings, small labels */

  /* Size scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 88px;

  /* Line heights */
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Tracking */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-label: 0.08em;   /* uppercase labels (mirrors the logo lettering) */
  --tracking-wide: 0.14em;

  /* Composite roles */
  --type-display: var(--weight-thin) var(--text-6xl) / var(--leading-tight) var(--font-brand);
  --type-h1: var(--weight-extralight) var(--text-5xl) / var(--leading-tight) var(--font-brand);
  --type-h2: var(--weight-light) var(--text-3xl) / var(--leading-snug) var(--font-brand);
  --type-h3: var(--weight-light) var(--text-xl) / var(--leading-snug) var(--font-brand);
  --type-subhead: var(--weight-medium) var(--text-lg) / var(--leading-snug) var(--font-brand);
  --type-body: var(--weight-light) var(--text-md) / var(--leading-relaxed) var(--font-brand);
  --type-body-sm: var(--weight-light) var(--text-sm) / var(--leading-normal) var(--font-brand);
  --type-label: var(--weight-medium) var(--text-xs) / 1 var(--font-brand);
}

/* spacing */
:root {
  /* 4px base grid */
  --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;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: var(--space-6);
  --section-gap: var(--space-24);

  /* Component sizing */
  --control-height-sm: 36px;
  --control-height-md: 44px;
  --control-height-lg: 56px;

  /* Logo clear space: 1/4 of symbol diameter (guide p.3) */
  --logo-clear-space: 0.25em;
}

/* effects */
:root {
  /* Radii — the brand is rectilinear; corners stay square or near-square */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* Shadows — used sparingly; cards are mostly flat with a hairline border */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--itl-white), 0 0 0 4px var(--itl-red);

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

  /* Photo protection: bottom-up black scrim for text over imagery */
  --scrim-bottom: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 100%);
}

/* base */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-primary);
  background: var(--surface-page);
}
a { color: var(--text-link); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--text-link-hover); text-decoration: underline; }
h1, h2, h3, h4, p { margin: 0; }