/**
 * @NApiVersion 2.1
 * @NScriptType Suitelet
 */
define(['N/ui/serverWidget'], function(serverWidget) {

  function onRequest(context) {
    var form = serverWidget.createForm({ title: 'GFS Branded Suitelet' });

    var htmlField = form.addField({
      id: 'custpage_gfs_html',
      type: serverWidget.FieldType.INLINEHTML,
      label: 'GFS Content'
    });

    htmlField.defaultValue = getGfsHtml();
    context.response.writePage(form);
  }

  function getGfsHtml() {
    return [
      '<link rel="preconnect" href="https://fonts.googleapis.com">',
      '<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">',
      '<link rel="stylesheet" href="https://gfs-design-v9.pages.dev/shared.css">',
      '<style>',
      '  /* Override NetSuite sandbox defaults */',
      '  .gfs-suitelet { font-family: "Inter", sans-serif; color: #1F1F1F; }',
      '  .gfs-suitelet * { box-sizing: border-box; }',
      '</style>',
      '<div class="gfs-suitelet">',
      '  <!-- Your GFS content here -->',
      '</div>'
    ].join('\n');
  }

  return { onRequest: onRequest };
});

<div class="gfs-suitelet">
  <!-- GFS buttons work directly once shared.css is loaded -->
  <button class="btn btn-primary" onclick="approveRecord()">Approve PO</button>
  <button class="btn btn-secondary" onclick="history.back()">Back to List</button>

  <!-- Status badges -->
  <span class="badge badge-green">Approved</span>
  <span class="badge badge-yellow">Pending Review</span>
  <span class="badge badge-red">Rejected</span>

  <!-- Data table -->
  <table class="demo-table" style="width:100%;margin-top:16px;">
    <thead><tr><th>Item</th><th>Qty</th><th>Rate</th><th>Amount</th></tr></thead>
    <tbody>
      <tr><td>Barrel Cheddar</td><td>40,000 lbs</td><td>$1.8450</td><td>$73,800</td></tr>
    </tbody>
  </table>
</div>

<!-- Full branded suitelet page wrapper -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://gfs-design-v9.pages.dev/shared.css">
<style>
  .gfs-suitelet { font-family:'Inter',sans-serif; color:#1F1F1F; max-width:1200px; margin:0 auto; padding:24px; }
  .gfs-suitelet * { box-sizing:border-box; margin:0; padding:0; }
  .gfs-suitelet .ns-header { background:#092F64; color:#fff; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
  .gfs-suitelet .ns-header h1 { font-size:15px; font-weight:700; letter-spacing:.04em; }
  .gfs-suitelet .ns-header .ns-meta { font-family:'IBM Plex Mono',monospace; font-size:10px; opacity:.7; letter-spacing:.06em; text-transform:uppercase; }
</style>

<div class="gfs-suitelet">
  <div class="ns-header">
    <h1>Global Food Solutions</h1>
    <span class="ns-meta">Suitelet v1.0</span>
  </div>

  <div class="s">
    <div class="s-head">
      <span class="s-num">01</span>
      <span class="s-title">Purchase Order Review</span>
      <span class="s-meta">Approval Queue</span>
    </div>
    <div class="s-body" style="padding:24px;">
      <!-- Your suitelet content here -->
    </div>
  </div>
</div>

<!-- Load the complete GFS design system in any HTML page -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&family=Inter:opsz,wght@14..32,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://gfs-design-v9.pages.dev/shared.css">
<link rel="stylesheet" href="https://gfs-design-v9.pages.dev/print.css" media="print">
<link rel="icon" href="https://gfs-design-v9.pages.dev/favicon.svg" type="image/svg+xml">

// Fetch tokens programmatically for build tooling
fetch('https://gfs-design-v9.pages.dev/tokens.json')
  .then(r => r.json())
  .then(tokens => {
    console.log('GFS Cobalt:', tokens.colors.primary.cobalt.value);
    console.log('GFS Font:', tokens.typography.display.family);
    console.log('Version:', tokens.version);
  });

<!-- Option 1: Always latest (default -- no query string needed) -->
<link rel="stylesheet" href="https://gfs-design-v9.pages.dev/shared.css">

<!-- Option 2: Force bypass browser cache with a deploy timestamp -->
<link rel="stylesheet" href="https://gfs-design-v9.pages.dev/shared.css?v=20260518">

<!-- Option 3: Pin to a specific deploy hash (immutable) -->
<link rel="stylesheet" href="https://abc123.gfs-design-v9.pages.dev/shared.css">

Production URL (always latest):
  https://gfs-design-v9.pages.dev/shared.css

Deploy-pinned URL (immutable snapshot):
  https://<commit-hash>.gfs-design-v9.pages.dev/shared.css

Branch preview URL:
  https://<branch-name>.gfs-design-v9.pages.dev/shared.css

Example: Pin suitelets to a tested deploy
  https://a1b2c3d.gfs-design-v9.pages.dev/shared.css