/* ==========================================================================
   JSG Portfolio - design tokens
   Values taken directly from Figma "Creative Portfolio Website"
     dark  : node 4:1760  Landing_Screen_Desktop_Dark   (content source of truth)
     light : node 4:2033  Landing_Screen_Desktop_Light
   ========================================================================== */

:root,
[data-theme="dark"] {
  --jsg-bg-page:     #161616;
  --jsg-bg-band:     #262626;
  --jsg-bg-tile:     #525252;
  --jsg-text:        #ffffff;
  --jsg-text-muted:  #c6c6c6;
  --jsg-rule:        #161616;
  --jsg-tile-shadow: none;
  --jsg-avatar-bg:   #161616;

  /* Work-detail page (127:1943) */
  --jsg-tab-text:    #f4f4f4;
  --jsg-tab-border:  #393939;
  --jsg-pill-bg:     #4d5358;
  --jsg-pill-text:   #ffffff;

  /* Forms + auth (Carbon g100 field roles) */
  --jsg-field-bg:      #393939;
  --jsg-field-border:  #6f6f6f;
  --jsg-field-text:    #f4f4f4;
  --jsg-field-holder:  #8d8d8d;
  --jsg-danger:        #fa4d56;
  --jsg-success:       #42be65;
  --jsg-disabled-bg:   #525252;
  --jsg-disabled-text: #8d8d8d;
}

[data-theme="light"] {
  --jsg-bg-page:     #ffffff;
  --jsg-bg-band:     #f5f5f5;
  --jsg-bg-tile:     #ffffff;
  --jsg-text:        #161616;
  --jsg-text-muted:  #525252;
  --jsg-rule:        #525252;
  --jsg-tile-shadow: 0 0 3px rgba(0, 0, 0, 0.12);
  --jsg-avatar-bg:   #ffffff;

  /* Carbon light-theme counterparts: gray-100 text, gray-20 subtle border,
     cool-gray-20 tag on cool-gray-100 text */
  --jsg-tab-text:    #161616;
  --jsg-tab-border:  #e0e0e0;
  --jsg-pill-bg:     #dde1e6;
  --jsg-pill-text:   #121619;

  /* Forms + auth (Carbon white field roles) */
  --jsg-field-bg:      #f4f4f4;
  --jsg-field-border:  #8d8d8d;
  --jsg-field-text:    #161616;
  --jsg-field-holder:  #6f6f6f;
  --jsg-danger:        #da1e28;
  --jsg-success:       #24a148;
  --jsg-disabled-bg:   #c6c6c6;
  --jsg-disabled-text: #8d8d8d;
}

:root {
  /* Constant across both themes */
  --jsg-accent:       #0059fe;
  --jsg-focus:        #0f62fe;   /* Carbon border-interactive - same both themes */
  --jsg-accent-text:  #ffffff;
  --jsg-thumb-bg:     #ffffff;

  /* Type */
  --jsg-font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --jsg-font-ui:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --jsg-tracking:  0.16px;

  /* Layout */
  --jsg-container:   1074px;
  --jsg-doc:         1064px;   /* work-detail body column (1512 - 2x224) */
  --jsg-page-max:    1512px;   /* Figma frame width - reference only; the
                                  header/hero/footer bleed past it */
  --jsg-header-h:    48px;
  --jsg-band-pad-x:  24px;
  --jsg-band-pad-t:  14px;
  --jsg-band-pad-b:  24px;
  /* Vertical rhythm, measured off the Figma frames (band top - previous band
     bottom). Mobile 4:1753 is a flat 16px; desktop 4:1760 is 24px between
     bands and 48px before the footer. */
  --jsg-band-gap:    16px;
  --jsg-hero-gap:    16px;
  --jsg-footer-gap:  16px;
}

@media (min-width: 768px) {
  :root {
    --jsg-band-gap:   24px;
    --jsg-hero-gap:   24px;  /* frame measures 26px here and 24px at every
                                other band - normalised to 24 for an even rhythm */
    --jsg-footer-gap: 48px;
  }
}