/* ============================================================
   Sentosa Marketplace - Colors & Type Tokens
   SDC B2B Marketplace (government tender). Source of truth:
   "design-system-prompt.md" (brand sampled from Sentosa logo).
   WCAG 2.1 AA is a hard floor. Orange = accent/actions only.
   ============================================================ */

/* ---- Fonts ----
   Poppins is now SELF-HOSTED from uploaded files in fonts/ (no CDN).
   The Sentosa wordmark is a rounded geometric sans; Poppins is the
   closest match in use until/unless an official face is supplied. */
@font-face { font-family: 'Poppins'; font-weight: 300; font-style: normal; font-display: swap; src: url('fonts/Poppins-Light.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 300; font-style: italic; font-display: swap; src: url('fonts/Poppins-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 400; font-style: italic; font-display: swap; src: url('fonts/Poppins-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: italic; font-display: swap; src: url('fonts/Poppins-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: italic; font-display: swap; src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; font-display: swap; src: url('fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: italic; font-display: swap; src: url('fonts/Poppins-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 800; font-style: normal; font-display: swap; src: url('fonts/Poppins-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 900; font-style: normal; font-display: swap; src: url('fonts/Poppins-Black.ttf') format('truetype'); }

:root {
  /* ============ BRAND COLOR ============ */
  /* Sentosa Orange ramp */
  --orange-50:  #FEF3E6;
  --orange-100: #FCDDB8;
  --orange-200: #F9C07F;
  --orange-300: #F7A24A;
  --orange-500: #F5871F; /* BRAND mark / large accents only */
  --orange-700: #D26E12; /* 3.5:1 on white - UI boundaries/icons only, NOT text */
  --orange-800: #B05D10; /* AA action fill: white text = 4.75:1 */
  --orange-900: #9A4F0C; /* AA orange text on light: 6.0:1 (links, labels) */
  --primary: var(--orange-500);            /* brand mark, never small white text on it */
  /* Action = orange fill that carries WHITE text at AA (4.75:1). Use for filled buttons,
     active nav pills, count badges, avatars - anywhere white sits on orange. */
  --action: var(--orange-800);
  --action-hover: var(--orange-900);       /* 6:1 on hover */
  /* Orange TEXT/links on light surfaces must be 900 (orange-700 fails at 3.5:1). */
  --orange-link: var(--orange-900);

  /* Sentosa Black - signature dark surface / secondary */
  --black: #1A1A1A;
  --true-black: #0A0A0A;

  /* ============ SIGNATURE ACCENTS ============ */
  /* Signature golden-yellow - system accent. NON-TEXT accent only:
     keylines, rails, section markers, highlights on dark. Never body text,
     never a fill under white text (fails contrast). */
  --gold-50:  #FEF8E7;
  --gold-200: #FBDF8F;
  --gold-500: #F5B81F;  /* signature accent - pairs with orange-500 */
  --gold-700: #8A6300;  /* AA yellow-family text on light (5.0:1) */
  --charcoal:   #232323;  /* layered dark surface above --black */
  --charcoal-2: #2C2C2C;  /* raised dark surface / dark cards */
  /* Signature keyline - thin yellow→orange rail. @kind other */
  --signature-keyline: linear-gradient(90deg, #F5B81F 0%, #F5871F 100%);  /* @kind other */

  /* Sand / warm neutral surface (light sections, hero paper) */
  --sand-50:  #FAF8F4;
  --sand-100: #F3EFE7;
  --sand-200: #E9E2D4;

  /* ============ NEUTRALS ============ */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F7F7;
  --neutral-100: #EFEFEF;
  --neutral-200: #E2E2E2;
  --neutral-300: #CFCFCF;
  --neutral-400: #9A9A9A;
  --neutral-600: #5A5A5A;
  --neutral-800: #2E2E2E;
  --neutral-900: #1A1A1A;

  /* ============ SEMANTIC ============ */
  --success: #1E9E5A;
  --success-bg: #E7F6EE;
  --warning: #E6A700;
  --warning-bg: #FCF3DA;
  --danger:  #D7322B;
  --danger-bg: #FBE9E8;
  --info:    #2563EB;
  --info-bg: #E7EEFD;

  /* ============ SURFACE / TEXT ROLES ============ */
  --bg:        var(--neutral-50);   /* page background */
  --surface:   var(--neutral-0);    /* cards, panels */
  --surface-2: var(--neutral-50);   /* nested / subtle fills */
  --surface-dark: var(--black);     /* branded dark bands */

  --fg1: #1A1A1A;                    /* primary text (15.3:1 on white) */
  --fg2: #5A5A5A;                    /* secondary text (6.4:1 on white) */
  --fg3: #767676;                    /* tertiary/muted (4.5:1 on white) */
  --fg-on-dark: #FFFFFF;             /* text on dark surfaces */
  --fg-on-dark-2: #C9C9C9;          /* secondary on dark (10.5:1 on #1A1A1A) */
  --fg-on-action: #FFFFFF;          /* white text on --action orange-800 = 4.75:1 (AA) */

  --border: var(--neutral-200);     /* hairline separators / inputs */
  --border-strong: var(--neutral-300);
  --border-focus: var(--orange-700);  /* input focus boundary: 3.5:1 on white (>=3:1) */

  /* ============ FOCUS RING ============ */
  /* orange-700 ring = 3.5:1 against white (meets 1.4.11 non-text 3:1); 2px light gap for separation. */
  --focus-ring: 0 0 0 2px var(--neutral-0), 0 0 0 5px var(--orange-700);
  --focus-ring-on-dark: 0 0 0 1px var(--black), 0 0 0 4px var(--orange-500);

  /* ============ TYPE ============ */
  --font-sans: 'Poppins', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (rem @16px root) */
  --fs-display: 2.5rem;   /* 40 */
  --fs-h1: 2rem;          /* 32 */
  --fs-h2: 1.5rem;        /* 24 */
  --fs-h3: 1.25rem;       /* 20 */
  --fs-body-l: 1.125rem;  /* 18 */
  --fs-body: 1rem;        /* 16 - min web body */
  --fs-caption: 0.875rem; /* 14 */
  --fs-overline: 0.75rem; /* 12 - labels/overlines only, never body */

  --lh-tight: 1.2;     /* @kind font */
  --lh-heading: 1.3;   /* @kind font */
  --lh-body: 1.55;     /* @kind font */

  --fw-regular: 400;   /* @kind font */
  --fw-medium: 500;    /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold: 700;      /* @kind font */

  /* ============ SPACING (4px base) ============ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;

  /* ============ RADIUS ============ */
  --radius-sm: 4px;
  --radius-md: 8px;   /* default - cards & buttons (rounded wordmark vibe) */
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ============ ELEVATION (restrained, institutional) ============ */
  --elev-0: none;
  --elev-1: 0 1px 3px rgba(0,0,0,0.08);
  --elev-2: 0 4px 12px rgba(0,0,0,0.12);

  --maxw: 1280px;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-heading); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
h2, .h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: var(--fw-semibold); }
.display { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
p, .body { font-size: var(--fs-body); line-height: var(--lh-body); }
.body-l { font-size: var(--fs-body-l); line-height: var(--lh-body); }
.caption { font-size: var(--fs-caption); color: var(--fg2); }
.overline { font-size: var(--fs-overline); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg2); }
code, .mono { font-family: var(--font-mono); font-size: 0.9em; }

a { color: var(--orange-link); text-underline-offset: 2px; }

*:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }